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

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

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

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

當我們對使用 new 關鍵字創(chuàng)建對象，被創(chuàng)建的對象的 [[prototype]] 會指向這個 prototype。

function Rect() {}
const rect = new Rect()
rect.__proto__ === Rect.prototype // true
Rect.prototype.constructor === Rect // true

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

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

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

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

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

// 父類
function Shape() {}
Shape.prototype.draw = function() {
  console.log('Shape Draw')
}
Shape.prototype.clear = function() {
  console.log('Shape Clear')
}
// 子類
function Rect() {}
/** 
 實現(xiàn)繼承的代碼放這里
**/
Rect.prototype.draw = function() {
  console.log('Rect Draw')
}

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

rect -> Rect.prototype -> Object.protoype -> null

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

方法1：Object.create

Rect.prototype = Object.create(Shape.prototype)
Rect.prototype.constructor = Rect // 選用，如果要用到 constructor

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

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

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

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

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

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

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

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

Object.setPrototypeOf(Rect.prototype, Shape.prototype)
// 或 
Rect.prototype.__proto__ = Shape.prototype

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

方法3：使用父類的實例

Rect.prototype = new Shape()

形成的原型鏈為：

rect -> shape（替代掉原來的 Rect.prototype） -> Shape.prototype -> Object.prototype -> null

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

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

總結

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

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

總結幾個核心知識點：

任何對象都有 [[prototype]] 屬性，讀寫對象屬性發(fā)現(xiàn)當前對象不存在時，會訪問 [[prototype]] 指向的對象嘗試訪問屬性，于是原型鏈形成了。
函數(shù)創(chuàng)建時，它的 prototype 屬性會拿到一個原型對象。當函數(shù)作為構造函數(shù)，通過 new 創(chuàng)建一個新對象時，這個新對象的 [[prototype]] 會指向這個原型對象。
JS 要實現(xiàn) “類” 繼承，本質是通過處理構造函數(shù)的 prototype 對象來修改原型鏈。

以上就是一文詳解如何用原型鏈的方式實現(xiàn)JS繼承的詳細內容，更多關于JS 原型鏈繼承的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: