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

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

原型鏈是什么

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

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

當然原型鏈不是無止境的，和單鏈表一樣，最后一個原型對象的值是null，原型鏈的所有對象都找不到指定的屬性時，我們會拿到undefined。

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

下面來舉幾個例子，讓讀者對原型鏈有一個直觀的認識：

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

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

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

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

當我們對使用new關(guān)鍵字創(chuàng)建對象，被創(chuàng)建的對象的[[prototype]]會指向這個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)建的多個實例對象共享同一個方法，減少內(nèi)存的使用。

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

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

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

//父類

functionShape(){}

Stotype.draw=function(){

console.log('ShapeDraw')

Stotype.clear=function(){

console.log('ShapeClear')

//子類

functionRect(){}

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

Rtotype.draw=function(){

console.log('RectDraw')

}

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

rect-Rtotype-Otoype-null

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

方法1：Object.create

Rtotype=Object.create(Stotype)

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

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

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

因為我們無法通過代碼的方式給[[prototype]]屬性賦值，所以使用了Object.create方法作為替代。

因為Rtotype指向了另一個新的對象，所以把constructor給丟失了，可以考慮把它放回來，如果你要用到的話。

缺點是替換掉了原來的對象。

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

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

不過另外還有一個方法Object.setPrototypeOf()可以修改對象的[[prototype]]，但因為性能的問題，也不推薦使用。

Object.setPrototypeOf(Rtotype,Stotype)

//或

Rtotype.__proto__=Stotype

都不推薦使用，但確實能用。

方法3：使用父類的實例

Rtotype=newShape()

形成的原型鏈為：

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

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

某種意義上，這個缺點是致命的。不推薦使用。

總結(jié)

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

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

總結(jié)幾個核心知識點：

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