原型鏈?zhǔn)荍avaScript實(shí)現(xiàn)繼承的核心機(jī)制。每個(gè)對(duì)象都有__proto__屬性指向其構(gòu)造函數(shù)的prototype，訪問(wèn)屬性時(shí)會(huì)沿此鏈向上查找。例如，用Object.create()設(shè)置Dog.prototype繼承Animal.prototype后，實(shí)例myDog可調(diào)用eat方法。正確設(shè)置原型鏈需：1. 用Object.create(SuperClass.prototype)創(chuàng)建子類(lèi)原型；2. 添加子類(lèi)方法；3. 手動(dòng)重置constructor。常見(jiàn)問(wèn)題包括：錯(cuò)誤賦值原型、未用new調(diào)用構(gòu)造函數(shù)、原型修改順序不當(dāng)。原型鏈最終指向Object.prototype，再往上為null。掌握這些核心概念和步驟，即可理清原型鏈邏輯。

JavaScript 的原型鏈?zhǔn)抢斫鈱?duì)象繼承機(jī)制的關(guān)鍵。很多人在剛接觸時(shí)會(huì)覺(jué)得復(fù)雜，其實(shí)只要抓住幾個(gè)核心概念，就能理清邏輯。

原型（prototype）到底是什么？

每個(gè)函數(shù)都有一個(gè) prototype 屬性，它是一個(gè)對(duì)象，默認(rèn)情況下這個(gè)對(duì)象有一個(gè) constructor 屬性指向函數(shù)本身。當(dāng)你用構(gòu)造函數(shù)創(chuàng)建實(shí)例時(shí)，實(shí)例內(nèi)部會(huì)有一個(gè)指針（通常稱(chēng)為 __proto__）指向構(gòu)造函數(shù)的 prototype。

舉個(gè)例子：

function Person() {}
const p1 = new Person();
console.log(p1.__proto__ === Person.prototype); // true

這說(shuō)明實(shí)例的 __proto__ 指向了構(gòu)造函數(shù)的原型對(duì)象。

比如：

function Animal() {}
Animal.prototype.eat = function () {
  console.log('Eating...');
};

function Dog() {}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.bark = function () {
  console.log('Woof!');
};

const myDog = new Dog();
myDog.eat(); // Eating...

這里，Dog 的原型繼承自 Animal 的原型，所以 myDog 實(shí)例可以訪問(wèn) eat 方法。這就是原型鏈的作用：實(shí)現(xiàn)繼承。

如何正確設(shè)置原型鏈？

設(shè)置原型鏈時(shí)有幾點(diǎn)需要注意：

• 使用 Object.create() 來(lái)設(shè)置原型更清晰安全
• 不要直接賦值構(gòu)造函數(shù)的 prototype 為另一個(gè)構(gòu)造函數(shù)的實(shí)例（雖然可行但容易出錯(cuò)）
• 記得重置 constructor 屬性，否則可能誤導(dǎo)后續(xù)使用

常見(jiàn)做法如下：

• 創(chuàng)建子類(lèi)的原型對(duì)象時(shí)，用 Object.create(SuperClass.prototype)
• 在子類(lèi)原型上添加自己的方法
• 如果需要，手動(dòng)指定 constructor 指向子類(lèi)

原型鏈中的常見(jiàn)問(wèn)題

有些開(kāi)發(fā)者會(huì)在修改原型后遇到奇怪的問(wèn)題，比如：

• 忘記用 new 調(diào)用構(gòu)造函數(shù)導(dǎo)致 this 指向錯(cuò)誤
• 多層繼承時(shí)沒(méi)有正確設(shè)置原型鏈，導(dǎo)致找不到方法
• 修改原型順序不對(duì)，覆蓋了已有的定義

另外，原型鏈不是無(wú)限長(zhǎng)的。查到最后一個(gè)原型是 null 就結(jié)束了。例如：

console.log(Object.prototype.__proto__); // null

基本上就這些。原型鏈看起來(lái)有點(diǎn)繞，但只要理解“對(duì)象通過(guò) __proto__ 找屬性”的機(jī)制，再結(jié)合實(shí)際代碼練習(xí)，很快就能掌握。

以上是了解JavaScript原型鏈的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！