JavaScript原型鏈怎么理解

本篇內(nèi)容介紹了“JavaScript原型鏈怎么理解”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

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

在JavaScript中的每個(gè)函數(shù)都會(huì)有一個(gè)prototype屬性，這個(gè)屬性又會(huì)返回一個(gè)原型，原型又有一個(gè)constructor屬性，這個(gè)屬性指向與之關(guān)聯(lián)的構(gòu)造函數(shù)。通過構(gòu)造函數(shù)實(shí)例化的對象會(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)在來測試Object構(gòu)造函數(shù)與原型的關(guān)系，示例代碼如下所示：

// 首先 Object 是一個(gè)構(gòu)造函數(shù)，就會(huì)有 prototype 屬性
var result = Object.prototype
console.log(result) // 得到一個(gè)原型對象
/*
 * 原型對象的 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

圖解如下所示：

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

2.原型鏈

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

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í)例化后的對象的原型
var pP = Object.getPrototypeOf(person)
// 驗(yàn)證 Person 實(shí)例化后的對象的原型是否指向構(gòu)造函數(shù)的 prototype
console.log(pP === PP) // true

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

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

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

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

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

“JavaScript原型鏈怎么理解”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！