web前端：理解js原型鏈

2022-02-23

工具/材料

javascript

操作方法

01
學(xué)習(xí)原型鏈之前我們先認(rèn)識(shí)一下構(gòu)造函數(shù)，代碼如下：

function S() {
this.name = 'xxx';
this.say = function() { console.log(this.name) }
}
var s1 = new S();

其中，s1是S的實(shí)例，s1的__proto__（大家先不用管__proto__屬性，后續(xù)會(huì)講到）中有一個(gè)constructor（構(gòu)造函數(shù)）屬性，該屬性指向S。
在這里，大家可以記住兩點(diǎn)：
1.s1是構(gòu)造函數(shù)S的實(shí)例；
2.s1.__proto__.constructor===S 也可以寫成 s1.constructor===S;
02
接下來我們來看下一段代碼：

function S2() {}
S2.prototype.name = 'XXX';
S2.prototype.say = function() {
console.log(this.name);
}

var s2 = new S2();
var s3 = new S2();
console.log(s2.sayName === s3.sayName);//true
console.log(s2.__proto__===S2.prototype);//true

這一段代碼中我們可以看到一個(gè)新屬性——prototype，這是什么呢，其實(shí)這就是構(gòu)造函數(shù)S2的原型對(duì)象，每個(gè)對(duì)象都有__proto__屬性，但是只有函數(shù)對(duì)象才有prototype屬性。而s2是構(gòu)造函數(shù)S2的實(shí)例，而s2.__proto__指向的就是S2的原型對(duì)象，即s2.__proto__===S2.prototype。得到一個(gè)結(jié)論，實(shí)例的__proto__屬性指向的就是其構(gòu)造函數(shù)的原型對(duì)象。
03
繼續(xù)上一步的代碼，我們添加代碼繼續(xù)調(diào)試：

console.log(s2.__proto__);//返回S2的原型對(duì)象
console.log(S2.prototype);//返回S2的原型對(duì)象

console.log(s2.__proto__.__proto__);//返回Object對(duì)象
console.log(S2.prototype.__proto__);//返回Object對(duì)象

console.log(s2.__proto__.__proto__.__proto__);//返回null
console.log(S2.prototype.__proto__.__proto__);//返回null

其實(shí)，S2的原型對(duì)象上還有原型對(duì)象，因?yàn)镾2的原型對(duì)象也相當(dāng)于只是Object對(duì)象的一個(gè)實(shí)例。
04
在這里我給大家畫了一張圖，便于大家理解原型鏈。