javascript - JavaScript 中对象的区别

Question

我在大学学习前端开发类(class)，老师坚持要我们使用一本旧书，以便在我们继续学习更高级和最新的实现之前学习 JavaScript 的历史和基础知识。

现在在这本书中，我们被指示为食品卡车编写​​一个网页，它应该接受订单。

现在在一些脚本中，对象定义如下:

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

这里使用关键字“this”定义数据对象，表示它属于函数对象 DataStore。

然而在某些脚本中，数据对象被定义为:

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);

这意味着类实际上与函数相同。并且您在其中使用关键字 this 的函数通常意味着您将要创建它的实例。

现在，如果我希望我的 lel() function 类的所有实例都有一个名为 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 = {};

if necessarily 意味着你在代码的其他地方有

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

简答

这个:

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

是如何定义一个名为 DataStore 的类，其中一个名为 data 的属性初始化为值 {}

还有这个:

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

是将名为 addSubmitHandler 的方法添加到已定义的类 FormHandler 的方法。该方法使用一个名为 data 的局部变量，可以是任何其他名称