JavaScript/面向對象編程

「面向對象編程」(OOP) 是一種軟件設計範式，最早出現於20世紀60年代，並在90年代流行起來。它致力於模塊化（modularization）、可重用性（reusability）、狀態（數據）和行為（函數）的封裝和隱藏，泛化、繼承等層次結構的設計。

它允許組件儘可能模塊化。特別是，當創建新的對象類型時，期望把它放置在不同的環境或新的編程項目中時應該能夠正常工作。這種方法的好處是更短的開發時間和更容易的調試，因為您正在重複使用已經經過驗證的程序代碼。這種「黑匣子」方法意味着數據進入對象，其他數據從對象中出來，但內部發生的事情並不是您需要關心的。

隨着時間的推移，已經開發出不同的技術來實現 OOP。最流行的是基於類和基於原型的方法。

基於類的面向對象編程

類是一個藍圖，定義了一組結構上相同的對象的所有方面（狀態和行為）。藍圖稱為類，類的實例稱為對象。 C系列語言的流行成員，尤其是Java、C++和C#，使用這種基於類的方法來實現OOP。

基於原型的面向對象編程

在基於原型的方法中，每個對象都存儲其狀態和行為。此外，它還有一個原型（如果它位於層次結構的頂部，則為 null）。這樣的原型是指向另一個更通用對象的指針。被引用對象的所有屬性也可在引用對象中使用。基於原型的方法中不存在類。

JavaScript中的面向對象編程：「一人穿兩件夾克」

JavaScript的基石之一是根據基於原型的面向對象編程規則提供對象。對象由作為保存數據的鍵/值對的屬性以及方法組成。這些屬性之一始終是原型屬性「__proto__」。它指向「父」對象，並由此實現關係。

// relationships are realized by the property '__proto__'
let parent = [];
let child = {
  name:      "Joel",
  __proto__: parent,
};
console.log(Object.getPrototypeOf(child)); // Array []

如果任何對象上缺少請求的屬性，JavaScript引擎會在「父」對象、「祖父」對象等祖先對象中搜索該屬性。這稱為原型鏈（prototype chain）。

所有這些都以相同的方式適用於用戶定義的對象和系統定義的對象（例如Arrays或Date）。

自EcmaScript 2015 (ES6)以來，語法提供了class或extends等關鍵字，這些關鍵字用於基於類的面向對象編程。儘管引入了這樣的關鍵字，JavaScript的基礎並沒有改變：這些關鍵字以與以前相同的方式生成原型。它們是語法糖，並按照傳統的原型技術進行編譯。

總之，JavaScript 的語法提供了兩種方式來表達面向對象的功能，例如源代碼中的繼承：「經典」風格和「類」風格。儘管語法不同，但實現技術僅略有不同。

經典語法

從誕生之日起，JavaScript就用「原型」機制定義了對象的父/子關係。如果在源代碼中沒有明確表示，這將自動發生。經典語法很好地展示了它。

要明確定義兩個對象的父/子關係，應使用setPrototypeOf方法將對象的原型設置為其他專門對象。方法運行後，父對象的所有屬性（包括函數）都為子對象所知。

<!DOCTYPE html>
<html>
<head>
  <script>
    function go() {
      "use strict";

      const adult = {
        familyName: "McAlister",
        showFamily: function() {return "The family name is: " + this.familyName;}
      };
      const child = {
        firstName: "Joel", 
        kindergarten: "House of Dwars"
      };

      // 'familyName' and 'showFamily()' are undefined here!
      alert(child.firstName + " " + child.familyName);

      // set the intended prototype chain
      Object.setPrototypeOf(child, adult);
      // or:  child.__proto__ = adult;

      alert(child.firstName + " " + child.familyName);
      alert(child.showFamily());
    }
    </script>
  </head>

  <body id="body">
    <button onclick="go()">Run the demo</button>
  </body>
</html>

「adult」對象包含「familyName」和一個函數「showFamily」。在第一步中，它們在對象「child」中是未知的。 setPrototypeOf 運行後，它們是已知的，因為「child」原型不再指向默認的「對象」，而是指向「adult」。

下一個腳本演示了原型鏈。它以用戶定義的變量 myArray 和 theObject 開始。 myArray 是一個包含三個元素的數組。第 6 行中的賦值操作將 theObject 設置為同一個數組。循環顯示 theObject 的原型，並將原型鏈的下一個更高級別分配給它。當到達層次結構的頂層時，循環結束。在本例中，原型為 null。

  function go() {
    "use strict";

    // define an array with three elements
    const myArray = [0, 1, 2];
    let theObject = myArray;

    do {
      // show the object's prototype
      console.log(Object.getPrototypeOf(theObject));  // Array[], Object{...}, null
      // or: console.log(theObject.__proto__);

      // switch to the next higher level
      theObject = Object.getPrototypeOf(theObject);
    } while (theObject);
  }

如您所知，「properties」是鍵/值對。因此，可以直接使用「prototype」屬性的值來識別和操作原型。有趣的是，鍵的名稱不是「prototype」，而是「__proto__」。這如第 11 行所示。不過，我們建議忽略此技術並使用 API 方法進行原型操作，例如 Object.getPrototypeOf、Object.setPrototypeOf 和 Object.create 。

「類」語法

該腳本定義了兩個類「Adult」和「Child」，它們具有一些內部屬性，其中一個是方法。關鍵字extends按層次結構組合了兩個類。然後，在第 21 行，使用關鍵字g a method. The keyword extends combines the two classes hierarchically. Afterward, in line 21, an instance is created with the keyword 創建了一個實例。

<!DOCTYPE html>
<html>
<head>
  <script>
  function go() {
    "use strict";

    class Adult {
      constructor(familyName) {
        this.familyName = familyName;
      }
      showFamily() {return "The family name is: " + this.familyName;}
    }
    class Child extends Adult {
      constructor(firstName, familyName, kindergarten) {
        super(familyName);
        this.firstName = firstName;
        this.kindergarten = kindergarten;
      }
    }

    const joel = new Child("Joel", "McAlister", "House of Dwars");
    alert(joel.firstName + " " + joel.familyName);
    alert(joel.showFamily());
  }
  </script>
</head>

<body id="body">
  <button onclick="go()">Run the demo</button>
</body>
</html>

屬性familyName 和方法showFamily 在「Adult」類中定義。但他們在「Child」類別中也是。

請再次注意，JavaScript 中這種基於類的繼承是在基於原型的經典方法之上實現的。

基於類的面向對象編程

基於原型的面向對象編程

JavaScript中的面向對象編程：「一人穿兩件夾克」

經典語法

「類」語法

參見