JavaScript 中 object 的區別

Question

我在大學做前端開發課程，老師堅持讓我們使用一本舊書，以便在我們繼續進行更高級和最近的實現之前了解 JavaScript 的歷史和基礎知識。

現在在這本書中，我們被指示為食品卡車編寫一個網頁，它應該接受訂單。

現在在一些腳本中，對象的定義如下：

function DataStore() {
    this.data = {};
  }

這里數據 object 是使用關鍵字“this”定義的，因為它屬於 function object DataStore。

但是在某些腳本中，數據 object 定義為：

FormHandler.prototype.addSubmitHandler = function() {
    console.log('Setting submit handler for form');
    this.$formElement.on('submit', function(event){
      event.preventDefault();

      var data = {};

我的問題是這兩個數據對象有什么區別？

Answer 1

簡短的答案在底部

對事物如何運作的冗長而無聊的介紹

當你寫這個：

function SomeThing() { }

你總能做到

let a = new SomeThing();

即使它沒有意義，例如：

function lel() { console.log('lelelel'); }
let g = new lel();
console.log(g);
console.log(g.constructor.name);

這意味着類實際上與函數相同。 在 function 中使用關鍵字this通常意味着您需要創建它的實例。

現在，如果我希望我的 lel lel() function class 的所有實例都有一個名為foo的屬性和一個名為bar的方法，請執行以下操作：

lel.prototype.foo = "Some initial value";
lel.prototype.bar = function() {
  console.log(this.foo);
}

現在我可以做

let g = new lel();
lel.bar();
lel.foo = "Hell yeah !";
lel.bar();

總之，這是：

function SomeThing() {
  this.data = {};
}

SomeThing.prototype.setData = function(key, value) {
  this.data[key] = value;
}

SomeThing.prototype.getDataKeys = function() {
  return Object.keys(this.data);
}

SomeThing.prototype.getDataValues = function() {
  return Object.values(this.data);
}

和這個是一樣的

class SomeThing {
  constructor() {
    this.data = {};
  }

  setData(key, value) {
    this.data[key] = value;
  }

  getDataKeys() {
    return Object.keys(this.data);
  }

  getDataValues() {
    return Object.values(this.data);
  }
}

澄清你的問題

如果您的代碼中某處有：

FormHandler.prototype.addSubmitHandler = function() {
    console.log('Setting submit handler for form');
    this.$formElement.on('submit', function(event){
      event.preventDefault();

      var data = {};

如果必然意味着您的代碼中的其他地方有

function FormHandler(...) { ... }

簡短的回答

這個：

function DataStore() {
  this.data = {};
}

是您如何定義一個名為DataStore的 class 並使用一個名為data的屬性初始化為值{}

和這個：

FormHandler.prototype.addSubmitHandler = function() {
    ...
    var data = {};
}

是如何向已定義的 class FormHandler添加一個名為addSubmitHandler的方法。 該方法使用名為data的局部變量，可以是任何其他名稱

Answer 2

在第一種情況下，數據是 object 的一個屬性，它的創建方式如下： new DataStore 。 您可以像這樣訪問此屬性：

var obj = new DataStore();
obj.data // => {}
/* or */
obj['data'] // => {}

在第二種情況下，數據只是事件處理程序內部的一個全局變量，它是在執行 function 時添加的。

var obj = new FormHandler();
obj.addSubmitHandler();

您可以像這樣訪問此變量：

data // => {}

我認為學習舊的 JS 不是一個好主意。 你會過時的。 你將無法使用最新的技術，而且更難找到工作。