理解 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

我认为explanation at MDN 很清楚。 class 关键字不过是旧式 OOP 实现的新名称，我们使用函数构造函数来获得相同的功能。

class 关键字被引入 JavaScript 以使其更类似于其他传统的面向对象语言，如 C++、Java。但它的核心仍然是函数构造函数，几乎没有变化。

对于您的问题“构造函数在构造函数下做什么” ES6 对旧版本进行了一些修改，这样类就不会充当构造函数，例如不能像这样直接调用类（没有 new 关键字）

NoteStore();

这将在 ES6 中引发错误，但如果它是 ES5 中的函数构造函数，那么它的工作原理就会使您面临出错的风险。类也没有被提升。

有关更多详细信息和示例，您可以阅读this link。

Answer 3

JSclass关键字：

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

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

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