一文詳解如何用原型鏈的方式實(shí)現(xiàn)JS繼承

第一文詳解如何用原型鏈的方式實(shí)現(xiàn)JS繼承目錄原型鏈?zhǔn)鞘裁赐ㄟ^構(gòu)造函數(shù)創(chuàng)建實(shí)例對象用原型鏈的方式實(shí)現(xiàn)繼承方法1：Object.create方法2：直接修改[[prototype]]方法3：使用父類的實(shí)例總結(jié)今天講一道經(jīng)典的原型鏈面試題。

原型鏈?zhǔn)鞘裁?/p>

JavaScript中，每當(dāng)創(chuàng)建一個(gè)對象，都會(huì)給這個(gè)對象提供一個(gè)內(nèi)置對象[[Prototype]]。這個(gè)對象就是原型對象，[[Prototype]]的層層嵌套就形成了原型鏈。

當(dāng)我們訪問一個(gè)對象的屬性時(shí)，如果自身沒有，就會(huì)通過原型鏈向上追溯，找到第一個(gè)存在該屬性原型對象，取出對應(yīng)值。

當(dāng)然原型鏈不是無止境的，和單鏈表一樣，最后一個(gè)原型對象的值是null，原型鏈的所有對象都找不到指定的屬性時(shí)，我們會(huì)拿到undefined。

[[Prototype]]雖然無法通過腳本進(jìn)行訪問，但大多數(shù)瀏覽器提供了__proto__屬性來訪問這個(gè)內(nèi)置對象，但它并不是標(biāo)準(zhǔn)，無法兼容所有瀏覽器。

下面來舉幾個(gè)例子，讓讀者對原型鏈有一個(gè)直觀的認(rèn)識(shí)：

通過對象字面量聲明a={}時(shí),a的[[prototype]]就是Ototype。此時(shí)的原型鏈?zhǔn)牵篴-Ototype-null。這里有個(gè)易錯(cuò)點(diǎn)，就是以為a的上一個(gè)原型對象是Object，其實(shí)并不對，Object其實(shí)只是一個(gè)構(gòu)造函數(shù)。聲明數(shù)組arr=[1,2,4]，它的原型鏈則是arr-Atotype-Ototype-null。Object.create(null)甚至能夠創(chuàng)建一個(gè)連[[prototype]]都沒有的真正的空對象，一般用于做字符串哈希表，比如vue源碼里就能經(jīng)?？吹?。

通過構(gòu)造函數(shù)創(chuàng)建實(shí)例對象

在JavaScript中，一個(gè)函數(shù)會(huì)在new關(guān)鍵字的配合下成為構(gòu)造函數(shù)。也就是說，任何一個(gè)函數(shù)都可以成為構(gòu)造函數(shù)。

當(dāng)聲明一個(gè)構(gòu)造函數(shù)時(shí)，它會(huì)有一個(gè)屬性名為prototype的對象(和[[prototype]]是不同的東西)，這個(gè)對象就是原型對象。這個(gè)對象的constructor又反過來指向構(gòu)造函數(shù)。

當(dāng)我們對使用new關(guān)鍵字創(chuàng)建對象，被創(chuàng)建的對象的[[prototype]]會(huì)指向這個(gè)prototype。

functionRect(){}

constrect=newRect()

rect.__proto__===Rtotype//true

Rtotype.constructor===Rect//true

只要是通過newRect()創(chuàng)建的對象，無論多少次，它的[[prototype]]都是指向Rtotype。另外，Rtotype指向的是Ototype。

這樣，通過給構(gòu)造函數(shù)的原型對象(Rtotype)添加一些方法(如Rtotype.draw)，就能讓創(chuàng)建的多個(gè)實(shí)例對象共享同一個(gè)方法，減少內(nèi)存的使用。

用原型鏈的方式實(shí)現(xiàn)繼承

理解了構(gòu)造函數(shù)如何影響創(chuàng)建的實(shí)例的原型鏈后，我們來探討一下核心問題，如何使用原型鏈來實(shí)現(xiàn)繼承。

假設(shè)我們有一個(gè)Shape構(gòu)造函數(shù)(父類)和Rect構(gòu)造函數(shù)(子類)。代碼如下：

//父類

functionShape(){}

Stotype.draw=function(){

console.log('ShapeDraw')

Stotype.clear=function(){

console.log('ShapeClear')

//子類

functionRect(){}

實(shí)現(xiàn)繼承的代碼放這里

Rtotype.draw=function(){

console.log('RectDraw')

}

通過前面的學(xué)習(xí)，我們知道，正常情況下使用newRect創(chuàng)建的實(shí)例對象，它的原型鏈?zhǔn)沁@樣的：

rect-Rtotype-Otoype-null

現(xiàn)在我們要實(shí)現(xiàn)的繼承，其實(shí)就是在原型鏈中間再加一個(gè)原型對象Stotype。對此我們需要對Rtotype進(jìn)行特殊的處理。

方法1：Object.create

Rtotype=Object.create(Stotype)

Rtotype.constructor=Rect//選用，如果要用到constructor

Rtotype.constructor=Rect//選用，如果要用到constructor

Object.create(proto)是個(gè)神奇的方法，它能夠創(chuàng)建一個(gè)空對象，并設(shè)置它的[[prototype]]為傳入的對象。

因?yàn)槲覀儫o法通過代碼的方式給[[prototype]]屬性賦值，所以使用了Object.create方法作為替代。

因?yàn)镽totype指向了另一個(gè)新的對象，所以把constructor給丟失了，可以考慮把它放回來，如果你要用到的話。

缺點(diǎn)是替換掉了原來的對象。

方法2：直接修改[[prototype]]

如果就是不想使用新對象，只想修改原對象，可以使用廢棄的__proto__屬性，但不推薦。

不過另外還有一個(gè)方法Object.setPrototypeOf()可以修改對象的[[prototype]]，但因?yàn)樾阅艿膯栴}，也不推薦使用。

Object.setPrototypeOf(Rtotype,Stotype)

//或

Rtotype.__proto__=Stotype

都不推薦使用，但確實(shí)能用。

方法3：使用父類的實(shí)例

Rtotype=newShape()

形成的原型鏈為：

rect-shape（替代掉原來的Rtotype）-Stotype-Ototype-null

基本能用，缺點(diǎn)是會(huì)產(chǎn)生副作用，就是執(zhí)行newShap()可能會(huì)出現(xiàn)副作用，比如給創(chuàng)建的對象添加了一些屬性、發(fā)送了請求之類的，完全取決于構(gòu)造函數(shù)內(nèi)的代碼。

某種意義上，這個(gè)缺點(diǎn)是致命的。不推薦使用。

總結(jié)

用原型鏈的方式實(shí)現(xiàn)一個(gè)JS繼承，其實(shí)就是希望構(gòu)造函數(shù)Son創(chuàng)建出來的對象son，它的原型鏈上加上父類Ptotype，所以最后就是要修改Stotype的[[prototype]]。

鑒于性能、兼容性、副作用等考慮，推薦使用方法1，即通過Object.create(Ptotype)創(chuàng)建一個(gè)指定了[[prototype]]的新對象，替換掉原來的Stotype指向的對象。

總結(jié)幾個(gè)核心知識(shí)點(diǎn)：

任何對象都有[[prototype]]屬性，讀寫對象屬性發(fā)現(xiàn)當(dāng)前對象不存在時(shí)，會(huì)訪問[[prototype]]指向的對象嘗試訪問屬性，于是原型鏈形成了。函數(shù)創(chuàng)建時(shí)，它的prototype屬性會(huì)拿到一個(gè)原型對象。當(dāng)函