若是使用 JavaScript 原型實現繼承

做者：Indermohan Sing
譯者：前端小智
來源：blog

點贊再看，養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

在這篇文章中，咱們將討論原型以及如何在 JS 中使用它們進行繼承。咱們還將會看到原型方法與基於類的繼承有何不一樣。

繼承

繼承是編程語言的一個顯著特徵，隨着面向對象編程語言的引入而出現。這些語言大可能是基於類的語言。在這裏，類就像一個藍圖，對象是它的展示形式。就是說，要建立一個對象，首先咱們必須建立一個類，而後咱們能夠從一個類建立任意數量的對象。

想象一下，咱們有一個表示智能手機的類。這個類具備像其餘智能手機同樣的能夠拍照、有GPS定位等功能。下面是使用 c++ 來描述這樣的一個類：

class SmartPhone {
  public:
  void captureImages() {}
}

SmartPhone x;
x.captureImages()

咱們建立了一個名爲SmartPhone的類，它有一個名爲capturePictures的方法用來拍照。

若是咱們須要一個iPhone類，它能夠捕捉圖像和一些特殊的功能，好比面部ID掃描。下面是兩種可能的解決方案：

1.將捕獲圖像功能與其餘常見的智能手機功能，以及iPhone的特定功能一塊兒重寫到一個新類中。可是這種方法須要更多的時間和精力，而且會引入更多的bug。

1. 重用SmartPhone類中的功能，這就是繼承的做用，繼承也是重用其餘類/對象中功能的一種方式。

這裏是咱們如何從SmartPhone類中繼承capturePictures方法，使用 c++ 實現以下：

class Iphone: public SmartPhone {
  public:
  void faceIDScan() {}
}

Iphone x

x.faceIDScan()

x.captureImages()

上面是一個簡單的繼承示例。 可是，它代表繼承可使咱們以某種方式重用代碼，從而使所生成的程序更不易出錯，而且花費更少的時間進行開發。

如下是關於類的一些重要信息：

• 繼承該功能的類稱爲子類
• 被繼承的類稱爲父類
• 一個類能夠同時從多個類中繼承
• 咱們能夠具備多個繼承級別。 例如，類C繼承自類B，而類B繼承自類A

值得注意的是，類自己並無作任何事情。在從類建立對象以前，實際上沒有完成任何工做。咱們將看到它爲何不一樣於JavaScript。

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

原型是什麼？

在 JS 中，全部對象都有一個特殊的內部屬性，該屬性基本上是對另外一個對象的引用。 此引用取決於對象的建立方式。 在 ECMAScript/JavaScript規範中，它表示爲[[Prototype]]。

因爲[[Prototype]]連接到一個對象，因此該對象有本身的[[Prototype]]引用。這就是創建原型鏈的方式。

這個[[Prototype]]鏈是 JS 中繼承的構建塊。

__proto__ 對象

爲了訪問對象的[[Prototype]]，大多數瀏覽器都提供__proto__屬性。訪問方式以下：

obj.__proto__

須要注意的是，這個屬性不是 ECMAScript 標準的一部分，它其實是由瀏覽器實現的。

獲取和設置原型方法

除了__proto__屬性外，還有一種訪問[[Prototype]]的標準方法：

Object.getPrototypeOf(obj);

對應的有個相似的方法來設置對象的[[Prototype]]：

Object.setPrototypeOf(obj, prototype);

[[Prototype]]和.prototype屬性

[[Prototype]] 只不過是一種用來表示物體原型的標準符號。 許多開發人員將其與.prototype屬性混淆，這是徹底不一樣的事情，接着咱們來研究一下.prototype屬性。

在 JS 中，有許多建立對象的方法。一種方法是使用構造函數，像這樣使用new關鍵字來調用它:

function SmartPhone(os) {
  this.os = os
}

let phone = new SmartPhone('Android')

在控制檯打印 phone 對象：

{
  os: "IPhone"
  __proto__{
    constructor: ƒ SmartPhone(os)
   __proto__: Object
  }
}

如今，若是咱們但願在phone對象上有一些方法，咱們能夠在函數上使用.prototype屬性，以下所示:

SmartPhone.prototype.isAndroid = function () {
  return this.os === 'Android' || 'android'
}

再次建立phone對象時，打印 phone 對象以下：

{
  os: "Android"
  __proto__{
    isAndroid: ƒ()
    constructor: ƒ SmartPhone(os)
   __proto__: Object
  }
}

咱們能夠在對象的[[Prototype]]中看到isAndroid()方法。

簡而言之，.prototype屬性基本上就像由給定的構造函數建立的[[Prototype]]對象的藍圖。 在.prototype屬性/對象中聲明的全部內容都會在對象的[[Prototype]]中彈出。

實上，若是將 SmartPhone.prototype 與phone 的[[Prototype]]進行比較，就會發現它們是相同的：

console.log(Object.getPrototypeOf(phone) === SmartPhone.prototype);
// true

值得注意的是，咱們還能夠在構造函數中建立方法：

function ObjectA() {
  this.methodA = function () {}
}

let firstObj = new ObjectA()
console.log(firstObj)

這種方法的問題是當咱們初始化一個新對象時。全部實例都有本身methodA的副本。相反，當咱們在函數的原型上建立它時，對象的全部實例只共享方法的一個副本，顯然使用原型的方式效率會太高。

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

當咱們訪問屬性時這裏發生了什麼？

當咱們訪問一個屬性以獲取它時，會發生如下狀況：

JS 引擎查找對象上的屬性，若是找到了該屬性，而後返回它。不然，JS 引擎將經過查看[[Prototype]]來檢查對象的繼承屬性，若是找到該屬性，則返回它，不然，它會查找 [[Prototype]]的[[Prototype]]。 找到屬性或沒有[[Prototype]]時，該鏈結束，這意味着咱們已經到達原型鏈的末端。

當咱們設置/建立屬性時，JS 老是在對象自己上進行設置。 即便[[Prototype]]鏈上存在相同的屬性，下面是一個例子：

function MyObject() {}
MyObject.prototype.propA = 10; // 在原型上建立屬性

let myObject = new MyObject();
console.log(myObject.propA); // [[Prototype]]上的屬性
// 10

myObject.propA = 20; // 對象的屬性
console.log(myObject.propA);
// 20

在上面的示例中，咱們建立了一個構造函數，該函數的[[Prototype]]上具備屬性propA。 當咱們嘗試對其進行讀取操做時，會在控制檯中看到該值。 可是，當咱們嘗試在對象自己上設置相同的屬性時；JS 使用給定值在對象上建立一個新屬性。 如今，若是咱們不能直接訪問[[Prototype]]上的屬性。

值得注意的是，普通對象的[[Prototype]]鏈的末尾是內置的Object.prototype。 這就是爲何大多數對象共享許多方法（例如toString()）的緣由。 由於它們其實是在Object.prototype上定義的。

使用原型繼承的各類方法

在 JS 中，不管咱們如何建立對象，只有原型繼承，但這些方式還有一些區別，來看看：

對象字面量

在JavaScript中建立對象的最簡單方法是使用對象字面量：

let obj = {}

若是在瀏覽器的控制檯中打印obj，咱們將看到如下內容:

基本上，全部用文字面量建立的對象都繼承了Object.prototype的屬性。

須要注意的是__proto__對象引用了建立它的構造函數。 在這種狀況下，constructor屬性指向Object構造函數。

使用對象構造函數

另外一種不太常見的建立對象的方法是使用對象構造函數。JS 提供了一個名爲Object的內置構造函數方法來建立對象。

let obj = new Object();

這種方法的結果與對象字面量的方式相同。它從Object.prototype繼承屬性。由於咱們使用Object做爲構造函數。

Object.create 方法

使用此輔助方法，咱們能夠建立一個帶有[[Prototype]]的對象，以下所示：

let SmartPhone = {
  captureImages: function() {}
}

let Iphone = Object.create(SmartPhone)

Iphone.captureImages()

這是在 JS 中使用繼承的最簡單方法之一。猜猜咱們如何在沒有任何[[Prototype]]引用的狀況下建立對象？

構造方法

與 JS 運行時提供的對象構造函數類似。 咱們還能夠建立本身的構造函數，以建立適合咱們需求的對象，以下所示：

function SmartPhone(os) {
  this.os = os;
}

SmartPhone.prototype.isAndroid = function() {
  return this.os === 'Android';
};

SmartPhone.prototype.isIOS = function() {
  return this.os === 'iOS';
};

如今，咱們想建立一個iPhone類，它應該有'iOS'做爲它 os 屬性的值。它還應該有faceIDScan方法。

首先，咱們必須建立一個Iphone構造函數，在其中，咱們應該調用SmartPhone構造函數，以下所示：

function Iphone() {
   SmartPhone.call(this, 'iOS');
}

這會將Iphone構造函數中的this.os屬性設置爲’iOS‘。

之因此調用SmartPhone.call方法，是由於咱們須要更改 this 值以引用Iphone。 這相似於在面向對象的世界中調用父級的構造函數。

接下來的事情是，咱們必須從SmartPhone構造函數繼承方法。 咱們能夠在此處使用Object.create朋友，以下所示：

Iphone.prototype = Object.create(SmartPhone.prototype);

如今，咱們可使用.prototype爲Iphone添加方法，以下所示：

Iphone.prototype.faceIDScan = function() {};

最後，咱們可使用Iphone建立一個對象，以下所示：

let x = new Iphone();

// calling inherited method
console.log(x.isIOS()):
// true

ES6 class

使用ES6，整個過程很是簡單。 咱們能夠建立類（它們與C ++或其餘任何基於類的語言中的類不一樣，只是在原型繼承之上的語法糖），而後從其餘類派生新的類。

下面是咱們如何在ES6中建立類:

class SmartPhone {
  constructor(os) {
    this.os = os;
  }
  isAndroid() {
    return this.os === 'Android';
  }
  isIos() {
    return this.os === 'iOS';
  }
};

如今，咱們能夠建立一個派生自SmartPhone的新類，以下所示：

class Iphone extends SmartPhone {
   constructor() {
     super.call('iOS');
   }
   faceIDScan() {}
}

咱們不是調用SmartPhone.call，而是調用super.call。 在內部，JavaScript引擎會自動爲咱們執行此操做。

最後，咱們可使用Iphone建立一個對象，以下所示

let x = new Iphone();

x.faceIDScan();

// calling inherited method
console.log(x.isIos()):
// true

該ES6示例與先前的構造方法示例相同。 可是閱讀和理解起來要乾淨得多。

---

原文：https://javascript.info/proto...

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

---

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。