在Javascript中理解类关键字

Question

我最近进入ES6并最终认真地看待课程。 我读到类只是Javascript中对象的封面，但是，我发现语法最不舒服。

有人可以解释/指向他们解释的参考，类如何模拟，重要的是我们如何将它们映射到我们脑海中的Javascript方式的对象操作。

class NoteStore {
  constructor() {
    this.bindActions(NoteActions);

    this.notes = [];
  }
}

根据上面的示例代码，我认为类只是构造函数，但是构造函数中的构造函数是什么？

作为一个开始用Js学习编程的人，我发现添加类（也是React的类）对Js来说是一个可怕的补充，所以任何帮助都会很棒。

谢谢

Answer 1

经典的基于类的编程基于定义一个类，该类包含构造函数方法和将由构造的对象继承的其他方法。 这是在您的示例中显示的内容：使用其名称定义类，然后包含构造函数，然后是其他函数。

类定义中的构造函数方法有点特殊，因为它在对象构造时被调用。 因为它很特殊，所以它需要被标记为这样，并且通过命名它constructor 。

在经典的Javascript（基于原型的OOP）中，这的工作方式不同：对象构造函数是一个简单的函数，每个对象实例继承的方法都是在该函数的.prototype属性的对象上定义的。 基于原型的OOP中的构造函数没有什么特别之处，它只是一个函数，真正的神奇之处在于new关键字以及在构造对象时使用this 。

使用构造函数方法以class的形式表达这一点仅仅适用于经典OOP开发人员，并且可以说提供了更紧凑的语法。

class NoteStore {
  constructor() {
    this.bindActions(NoteActions);
    this.notes = [];
  }

  bindActions(actions) {
    ..
  }
}

这在简单的Javascript中表达的是：

function NoteStore() {
  this.bindActions(NoteActions);
  this.notes = [];
}

NoteStore.prototype.bindActions = function (actions) {
  ..
}

Answer 2

我认为MDN的解释非常明确。 class keyword只是旧式OOP实现的新名称，我们使用函数构造函数来获得相同的功能。

class关键字被带到JavaScript，使其更像其他传统的面向对象语言，如C ++，Java。 但在核心，它仍然是功能构造函数，几乎没有变化。

对于你的问题“构造函数在构造函数下做了什么”ES6对旧版本进行了一些修改，以便类不能作为examaple类的构造函数，不能直接调用（没有new关键字）

NoteStore();

这将在ES6中引发错误，但如果它是一个像ES5中的函数构造函数，那么它会让你面临bug的风险。 课程也没有悬挂。

有关更多详细信息和示例，您可以阅读此链接 。

Answer 3

JS class关键字：

Javascript有一个继承系统，称为原型继承。 这是一个系统，对象从其他对象继承属性。 当使用new关键字调用函数时，使用它创建的新对象从构造函数的prototype属性中“继承”属性。

JS class关键字只是构造函数的语法糖。 class关键字只有不同的语法，但它基本上实现了使用原型创建对象的相同目标。 以下面的代码为例：

 class human { constructor (name) { this.name = name; } speak () { console.log('hi')} }; console.log(typeof human); // logs function, a class is just a constructor function under the hood const me = new human('Willem'); console.log(Object.getPrototypeOf(me) === human.prototype); // logs true, the object me has a reference to the human.prototype object. me.speak(); // This speak method is located on the prototype of the object, not the object itself console.log(me.hasOwnProperty('speak')); // logs false console.log(human.prototype.hasOwnProperty('speak')); // logs true