在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