使用__proto__來解釋繼承原理可以幫助理解 JavaScript 的原型鏈機(jī)制
基本概念
__proto__：是一個(gè)非標(biāo)準(zhǔn)的屬性，指向?qū)ο蟮脑汀?shí)際上，__proto__ 是對象內(nèi)部的[[Prototype]]屬性的非標(biāo)準(zhǔn)訪問方式。在現(xiàn)代 JavaScript 中，可以使用 Object.getPrototypeOf() 和 Object.setPrototypeOf()代替。
繼承原理的解釋
-
構(gòu)造函數(shù)與原型設(shè)置：
- 創(chuàng)建一個(gè)構(gòu)造函數(shù)，例如
Animal。 - 通過設(shè)置構(gòu)造函數(shù)的
prototype屬性來定義實(shí)例共享的方法。 - 新創(chuàng)建的對象的
__proto__指向構(gòu)造函數(shù)的prototype。
function Animal(name) {
this.name = name;
}
Animal.prototype.say = function() {
console.log('I am an animal');
};
在這個(gè)例子中：
-
Animal.prototype是Animal構(gòu)造函數(shù)的原型對象。 -
Animal.prototype.__proto__指向Object.prototype（原型鏈的頂端）。
-
創(chuàng)建繼承關(guān)系：
- 創(chuàng)建另一個(gè)構(gòu)造函數(shù)
Mammal，并設(shè)置Mammal.prototype的原型為Animal.prototype。
function Mammal(name, furColor) {
Animal.call(this, name); // 繼承 Animal 的屬性
this.furColor = furColor;
}
Mammal.prototype = Object.create(Animal.prototype);
Mammal.prototype.constructor = Mammal;
在這個(gè)例子中：
-
Mammal.prototype的__proto__被設(shè)置為Animal.prototype。也就是說，Mammal.prototype.__proto__指向Animal.prototype。
-
實(shí)例的原型鏈：
- 創(chuàng)建
Mammal實(shí)例時(shí)，實(shí)例的__proto__指向Mammal.prototype，而Mammal.prototype.__proto__指向Animal.prototype。
const mammal = new Mammal('Lion', 'golden');
在這個(gè)例子中：
-
mammal.__proto__是Mammal.prototype。 -
mammal.__proto__.__proto__（即Mammal.prototype.__proto__）是Animal.prototype。
-
訪問屬性和方法：
- 當(dāng)訪問
mammal的屬性或方法時(shí)，JavaScript 引擎會(huì)首先檢查mammal本身。 - 如果在
mammal中找不到，JavaScript 引擎會(huì)沿著原型鏈查找，即檢查mammal.__proto__和mammal.__proto__.__proto__，直到找到或到達(dá)原型鏈的頂端（Object.prototype）。
console.log(mammal.name); // 輸出: Lion (直接從實(shí)例對象中找到)
console.log(mammal.furColor); // 輸出: golden (直接從實(shí)例對象中找到)
console.log(mammal.say()); // 輸出: I am an animal (從 Animal.prototype 找到)
在這個(gè)例子中：
-
mammal直接擁有name和furColor屬性。 -
say方法是從Mammal.prototype.__proto__（即Animal.prototype）中繼承的。
總結(jié)
子類的 prototype 的 __proto__ 指向父類的 prototype，形成一個(gè)原型鏈。
實(shí)例對象的 __proto__ 指向?qū)嵗臉?gòu)造函數(shù)的 prototype，從而允許訪問繼承的屬性和方法。
這個(gè)機(jī)制使得 JavaScript 實(shí)現(xiàn)了對象的繼承和方法的共享。希望這個(gè)解釋有幫助！