在這篇文章中，我們將討論原型以及如何在 JS 中使用它們進(jìn)行繼承。我們還將會(huì)看到原型方法與基于類的繼承有何不同。

繼承

繼承是編程語(yǔ)言的一個(gè)顯著特征，隨著面向?qū)ο缶幊陶Z(yǔ)言的引入而出現(xiàn)。這些語(yǔ)言大多是基于類的語(yǔ)言。在這里，類就像一個(gè)藍(lán)圖，對(duì)象是它的展現(xiàn)形式。就是說(shuō)，要?jiǎng)?chuàng)建一個(gè)對(duì)象，首先我們必須創(chuàng)建一個(gè)類，然后我們可以從一個(gè)類創(chuàng)建任意數(shù)量的對(duì)象。

想象一下，我們有一個(gè)表示智能手機(jī)的類。這個(gè)類具有像其他智能手機(jī)一樣的可以拍照、有GPS定位等功能。下面是使用 c++ 來(lái)描述這樣的一個(gè)類：

class SmartPhone {

 public:

 void captureImages() {}

}

SmartPhone x;

x.captureImages()

我們創(chuàng)建了一個(gè)名為SmartPhone的類，它有一個(gè)名為capturePictures的方法用來(lái)拍照。

如果我們需要一個(gè)iPhone類，它可以捕捉圖像和一些特殊的功能，比如面部ID掃描。下面是兩種可能的解決方案：

1.將捕獲圖像功能與其他常見的智能手機(jī)功能，以及iPhone的特定功能一起重寫到一個(gè)新類中。但是這種方法需要更多的時(shí)間和精力，并且會(huì)引入更多的bug。

重用SmartPhone類中的功能，這就是繼承的作用，繼承也是重用其他類/對(duì)象中功能的一種方式。

這里是我們?nèi)绾螐腟martPhone類中繼承capturePictures方法，使用 c++ 實(shí)現(xiàn)如下：

class Iphone: public SmartPhone {

 public:

 void faceIDScan() {}

}

Iphone x

x.faceIDScan()

x.captureImages()

上面是一個(gè)簡(jiǎn)單的繼承示例。 但是，它表明繼承可以使我們以某種方式重用代碼，從而使所生成的程序更不易出錯(cuò)，并且花費(fèi)更少的時(shí)間進(jìn)行開發(fā)。

以下是關(guān)于類的一些重要信息：

繼承該功能的類稱為子類

被繼承的類稱為父類

一個(gè)類可以同時(shí)從多個(gè)類中繼承

我們可以具有多個(gè)繼承級(jí)別。 例如，類C繼承自類B，而類B繼承自類A

值得注意的是，類本身并沒有做任何事情。在從類創(chuàng)建對(duì)象之前，實(shí)際上沒有完成任何工作。我們將看到它為什么不同于JavaScript。

大家都說(shuō)簡(jiǎn)歷沒項(xiàng)目寫，我就幫大家找了一個(gè)項(xiàng)目，還附贈(zèng)【搭建教程】。

原型是什么？

在 JS 中，所有對(duì)象都有一個(gè)特殊的內(nèi)部屬性，該屬性基本上是對(duì)另一個(gè)對(duì)象的引用。 此引用取決于對(duì)象的創(chuàng)建方式。 在 ECMAScript/JavaScript規(guī)范中，它表示為[[Prototype]]。

由于[[Prototype]]鏈接到一個(gè)對(duì)象，所以該對(duì)象有自己的[[Prototype]]引用。這就是建立原型鏈的方式。

這個(gè)[[Prototype]]鏈?zhǔn)?JS 中繼承的構(gòu)建塊。

__proto__ 對(duì)象

為了訪問對(duì)象的[[Prototype]]，大多數(shù)瀏覽器都提供__proto__屬性。訪問方式如下：

obj.__proto__

需要注意的是，這個(gè)屬性不是 ECMAScript 標(biāo)準(zhǔn)的一部分，它實(shí)際上是由瀏覽器實(shí)現(xiàn)的。

獲取和設(shè)置原型方法

除了__proto__屬性外，還有一種訪問[[Prototype]]的標(biāo)準(zhǔn)方法：

Object.getPrototypeOf(obj);

對(duì)應(yīng)的有個(gè)類似的方法來(lái)設(shè)置對(duì)象的[[Prototype]]：

Object.setPrototypeOf(obj, prototype);

[[Prototype]]和.prototype屬性

[[Prototype]] 只不過是一種用來(lái)表示物體原型的標(biāo)準(zhǔn)符號(hào)。 許多開發(fā)人員將其與.prototype屬性混淆，這是完全不同的事情，接著我們來(lái)研究一下.prototype屬性。

在 JS 中，有許多創(chuàng)建對(duì)象的方法。一種方法是使用構(gòu)造函數(shù)，像這樣使用new關(guān)鍵字來(lái)調(diào)用它:

function SmartPhone(os) {

 this.os = os

}

let phone = new SmartPhone('Android')

在控制臺(tái)打印 phone 對(duì)象：

{

 os: "IPhone"

 __proto__{

   constructor: ? SmartPhone(os)

  __proto__: Object

 }

}

現(xiàn)在，如果我們希望在phone對(duì)象上有一些方法，我們可以在函數(shù)上使用.prototype屬性，如下所示:

SmartPhone.prototype.isAndroid = function () {

 return this.os === 'Android' || 'android'

}

再次創(chuàng)建phone對(duì)象時(shí)，打印 phone 對(duì)象如下：

{

 os: "Android"

 __proto__{

   isAndroid: ?()

   constructor: ? SmartPhone(os)

  __proto__: Object

 }

}

我們可以在對(duì)象的[[Prototype]]中看到isAndroid()方法。

簡(jiǎn)而言之，.prototype屬性基本上就像由給定的構(gòu)造函數(shù)創(chuàng)建的[[Prototype]]對(duì)象的藍(lán)圖。 在.prototype屬性/對(duì)象中聲明的所有內(nèi)容都會(huì)在對(duì)象的[[Prototype]]中彈出。

實(shí)上，如果將 SmartPhone.prototype 與phone 的[[Prototype]]進(jìn)行比較，就會(huì)發(fā)現(xiàn)它們是相同的：

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

// true

值得注意的是，我們還可以在構(gòu)造函數(shù)中創(chuàng)建方法：

function ObjectA() {

 this.methodA = function () {}

}

let firstObj = new ObjectA()

console.log(firstObj)

這種方法的問題是當(dāng)我們初始化一個(gè)新對(duì)象時(shí)。所有實(shí)例都有自己methodA的副本。相反，當(dāng)我們?cè)诤瘮?shù)的原型上創(chuàng)建它時(shí)，對(duì)象的所有實(shí)例只共享方法的一個(gè)副本，顯然使用原型的方式效率會(huì)過高。

大家都說(shuō)簡(jiǎn)歷沒項(xiàng)目寫，我就幫大家找了一個(gè)項(xiàng)目，還附贈(zèng)【搭建教程】。

當(dāng)我們?cè)L問屬性時(shí)這里發(fā)生了什么？

當(dāng)我們?cè)L問一個(gè)屬性以獲取它時(shí)，會(huì)發(fā)生以下情況：

JS 引擎查找對(duì)象上的屬性，如果找到了該屬性，然后返回它。否則，JS 引擎將通過查看[[Prototype]]來(lái)檢查對(duì)象的繼承屬性，如果找到該屬性，則返回它，否則，它會(huì)查找 [[Prototype]]的[[Prototype]]。 找到屬性或沒有[[Prototype]]時(shí)，該鏈結(jié)束，這意味著我們已經(jīng)到達(dá)原型鏈的末端。

當(dāng)我們?cè)O(shè)置/創(chuàng)建屬性時(shí)，JS 總是在對(duì)象本身上進(jìn)行設(shè)置。 即使[[Prototype]]鏈上存在相同的屬性，下面是一個(gè)例子：

function MyObject() {}

MyObject.prototype.propA = 10; // 在原型上創(chuàng)建屬性

let myObject = new MyObject();

console.log(myObject.propA); // [[Prototype]]上的屬性

// 10

myObject.propA = 20; // 對(duì)象的屬性

console.log(myObject.propA);

// 20

在上面的示例中，我們創(chuàng)建了一個(gè)構(gòu)造函數(shù)，該函數(shù)的[[Prototype]]上具有屬性propA。 當(dāng)我們嘗試對(duì)其進(jìn)行讀取操作時(shí)，會(huì)在控制臺(tái)中看到該值。 但是，當(dāng)我們嘗試在對(duì)象本身上設(shè)置相同的屬性時(shí)；JS 使用給定值在對(duì)象上創(chuàng)建一個(gè)新屬性。 現(xiàn)在，如果我們不能直接訪問[[Prototype]]上的屬性。

值得注意的是，普通對(duì)象的[[Prototype]]鏈的末尾是內(nèi)置的Object.prototype。 這就是為什么大多數(shù)對(duì)象共享許多方法（例如toString()）的原因。 因?yàn)樗鼈儗?shí)際上是在Object.prototype上定義的。

使用原型繼承的各種方法

在 JS 中，無(wú)論我們?nèi)绾蝿?chuàng)建對(duì)象，只有原型繼承，但這些方式還有一些區(qū)別，來(lái)看看：

對(duì)象字面量

在JavaScript中創(chuàng)建對(duì)象的最簡(jiǎn)單方法是使用對(duì)象字面量：

let obj = {}

如果在瀏覽器的控制臺(tái)中打印obj，我們將看到以下內(nèi)容:

clipboard.png

基本上，所有用文字面量創(chuàng)建的對(duì)象都繼承了Object.prototype的屬性。

需要注意的是__proto__對(duì)象引用了創(chuàng)建它的構(gòu)造函數(shù)。 在這種情況下，constructor屬性指向Object構(gòu)造函數(shù)。

使用對(duì)象構(gòu)造函數(shù)

另一種不太常見的創(chuàng)建對(duì)象的方法是使用對(duì)象構(gòu)造函數(shù)。JS 提供了一個(gè)名為Object的內(nèi)置構(gòu)造函數(shù)方法來(lái)創(chuàng)建對(duì)象。

let obj = new Object();

這種方法的結(jié)果與對(duì)象字面量的方式相同。它從Object.prototype繼承屬性。因?yàn)槲覀兪褂肙bject作為構(gòu)造函數(shù)。

Object.create 方法

使用此輔助方法，我們可以創(chuàng)建一個(gè)帶有[[Prototype]]的對(duì)象，如下所示：

let SmartPhone = {

 captureImages: function() {}

}

let Iphone = Object.create(SmartPhone)

Iphone.captureImages()

這是在 JS 中使用繼承的最簡(jiǎn)單方法之一。猜猜我們?nèi)绾卧跊]有任何[[Prototype]]引用的情況下創(chuàng)建對(duì)象？

構(gòu)造方法

與 JS 運(yùn)行時(shí)提供的對(duì)象構(gòu)造函數(shù)相似。 我們還可以創(chuàng)建自己的構(gòu)造函數(shù)，以創(chuàng)建適合我們需求的對(duì)象，如下所示：

function SmartPhone(os) {

 this.os = os;

}

SmartPhone.prototype.isAndroid = function() {

 return this.os === 'Android';

};

SmartPhone.prototype.isIOS = function() {

 return this.os === 'iOS';

};

現(xiàn)在，我們想創(chuàng)建一個(gè)iPhone類，它應(yīng)該有'iOS'作為它 os 屬性的值。它還應(yīng)該有faceIDScan方法。

首先，我們必須創(chuàng)建一個(gè)Iphone構(gòu)造函數(shù)，在其中，我們應(yīng)該調(diào)用SmartPhone構(gòu)造函數(shù)，如下所示：

function Iphone() {

  SmartPhone.call(this, 'iOS');

}

這會(huì)將Iphone構(gòu)造函數(shù)中的this.os屬性設(shè)置為’iOS‘。

之所以調(diào)用SmartPhone.call方法，是因?yàn)槲覀冃枰?this 值以引用Iphone。 這類似于在面向?qū)ο蟮氖澜缰姓{(diào)用父級(jí)的構(gòu)造函數(shù)。

接下來(lái)的事情是，我們必須從SmartPhone構(gòu)造函數(shù)繼承方法。 我們可以在此處使用Object.create朋友，如下所示：

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

現(xiàn)在，我們可以使用.prototype為Iphone添加方法，如下所示：

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

最后，我們可以使用Iphone創(chuàng)建一個(gè)對(duì)象，如下所示：

let x = new Iphone();

// calling inherited method

console.log(x.isIOS()):

// true

ES6 class

使用ES6，整個(gè)過程非常簡(jiǎn)單。 我們可以創(chuàng)建類（它們與C ++或其他任何基于類的語(yǔ)言中的類不同，只是在原型繼承之上的語(yǔ)法糖），然后從其他類派生新的類。

下面是我們?nèi)绾卧贓S6中創(chuàng)建類:

class SmartPhone {

 constructor(os) {

   this.os = os;

 }

 isAndroid() {

   return this.os === 'Android';

 }

 isIos() {

   return this.os === 'iOS';

 }

};

現(xiàn)在，我們可以創(chuàng)建一個(gè)派生自SmartPhone的新類，如下所示：

class Iphone extends SmartPhone {

  constructor() {

    super.call('iOS');

  }

  faceIDScan() {}

}

我們不是調(diào)用SmartPhone.call，而是調(diào)用super.call。 在內(nèi)部，JavaScript引擎會(huì)自動(dòng)為我們執(zhí)行此操作。

最后，我們可以使用Iphone創(chuàng)建一個(gè)對(duì)象，如下所示

let x = new Iphone();

x.faceIDScan();

// calling inherited method

console.log(x.isIos()):

// true

該ES6示例與先前的構(gòu)造方法示例相同。 但是閱讀和理解起來(lái)要干凈得多。

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

代碼部署后可能存在的BUG沒法實(shí)時(shí)知道，事后為了解決這些BUG，花了大量的時(shí)間進(jìn)行l(wèi)og 調(diào)試，這邊順便給大家推薦一個(gè)好用的BUG監(jiān)控工具 Fundebug。