前言：

我們上一篇文章介紹了JavaScript原型，為什么不將原型鏈一起介紹了呢？因?yàn)镴avaScript中的原型鏈?zhǔn)且粋€(gè)難點(diǎn)，也是一個(gè)面試必問(wèn)的考點(diǎn)，現(xiàn)在就來(lái)學(xué)習(xí)一下。

1.原型的關(guān)系

在JavaScript中的每個(gè)函數(shù)都會(huì)有一個(gè)prototype屬性，這個(gè)屬性又會(huì)返回一個(gè)原型，原型又有一個(gè)constructor屬性，這個(gè)屬性指向與之關(guān)聯(lián)的構(gòu)造函數(shù)。通過(guò)構(gòu)造函數(shù)實(shí)例化的對(duì)象會(huì)有一個(gè)__proto__屬性，這個(gè)__proto__屬性指向與構(gòu)造函數(shù)的prototype指向的是同一內(nèi)存。

值得注意的是__proto__屬性已經(jīng)在標(biāo)準(zhǔn)中被刪除，這里使用Object.getPrototypeOf(object)和Object.setPrototypeOf(object, prototype)代替。

現(xiàn)在來(lái)測(cè)試Object構(gòu)造函數(shù)與原型的關(guān)系，示例代碼如下所示：

// 首先 Object 是一個(gè)構(gòu)造函數(shù)，就會(huì)有 prototype 屬性
var result = Object.prototype
console.log(result) // 得到一個(gè)原型對(duì)象
/*
 * 原型對(duì)象的 constructor 屬性 -> 返回與之關(guān)聯(lián)的構(gòu)造函數(shù)
 * Object.getPrototypeOf(result) 返回指向構(gòu)造函數(shù)的 prototype
 */
var result2 = result.constructor
console.log(result2) // [Function: Object]
var result3 = Object.getPrototypeOf(result)
console.log(result3) // null

圖解如下所示：

我們通過(guò)Object.getPrototypeOf(Object.prototype)獲取Object.prototype的原型時(shí)，返回的值為null這就表示我們查找到Object.prototype就可以停止查找了。

2.原型鏈

為了更方便我們來(lái)理解原型鏈?zhǔn)绞裁?，首先?lái)看一下下面這一段代碼：

function Person(name) {
  this.name = name
}

var PP = Person.prototype
var PPC = PP.constructor
// 驗(yàn)證與構(gòu)造函數(shù)是否相同
console.log(PPC === Person) // true

// 實(shí)例化 Person
var person = new Person('一碗周')
// 獲取 Person 實(shí)例化后的對(duì)象的原型
var pP = Object.getPrototypeOf(person)
// 驗(yàn)證 Person 實(shí)例化后的對(duì)象的原型是否指向構(gòu)造函數(shù)的 prototype
console.log(pP === PP) // true

實(shí)際上所有的構(gòu)造函數(shù)默認(rèn)都是繼承于Object的，如下代碼測(cè)試：

// 獲取 Person.prototype 的原型
var PPP = Object.getPrototypeOf(PP)
var OP = Object.prototype
// 判斷兩者是否相等
console.log(PPP === OP) // true

上面的代碼表述的不是很清楚，我畫了一張圖來(lái)理解一下：

上圖中畫紅色線的部分就是原型鏈，原型鏈就是原型中的關(guān)系的指向，直到最終結(jié)果為null也就是Object.prototype，原型鏈就結(jié)束了，也就是說(shuō)**Object.prototype**是原型鏈中的終點(diǎn)。

我們可以通過(guò)Object.setPrototypeOf(obj, prototype)方法來(lái)設(shè)置具體內(nèi)容的原型鏈，但是如果不是必要建議不要這樣做，因?yàn)檫@樣做是非常耗性能的。

3.結(jié)語(yǔ)

通過(guò)兩張圖來(lái)講解JavaScript中的原型中的關(guān)系以及原型鏈?zhǔn)鞘裁?，最后還介紹了原型鏈的終點(diǎn)。

到此這篇關(guān)于JavaScript兩張圖搞懂原型鏈的文章就介紹到這了,更多相關(guān)JavaScript原型鏈內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論