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 不是一个好主意。 你会过时的。 你将无法使用最新的技术，而且更难找到工作。