web前端：理解js原型鏈
東西/材料
javascript
操作方式
-
01
進修原型鏈之前我們先熟悉一下機關函數，代碼如下：
function S() {
this.name = 'xxx';
this.say = function() { console.log(this.name) }
}
var s1 = new S();
此中，s1是S的實例，s1的__proto__（大師先不消管__proto__屬性，后續會講到）中有一個constructor（機關函數）屬性，該屬性指標的目的S。
在這里，大師可以記住兩點：
1.s1是機關函數S的實例；
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
這一段代碼中我們可以看到一個新屬性——prototype，這是什么呢，其實這就是機關函數S2的原型對象，每個對象都有__proto__屬性，可是只有函數對象才有prototype屬性。而s2是機關函數S2的實例，而s2.__proto__指標的目的的就是S2的原型對象，即s2.__proto__===S2.prototype。獲得一個結論，實例的__proto__屬性指標的目的的就是其機關函數的原型對象。 -
03
繼續上一步的代碼，我們添加代碼繼續調試：
console.log(s2.__proto__);//返回S2的原型對象
console.log(S2.prototype);//返回S2的原型對象
console.log(s2.__proto__.__proto__);//返回Object對象
console.log(S2.prototype.__proto__);//返回Object對象
console.log(s2.__proto__.__proto__.__proto__);//返回null
console.log(S2.prototype.__proto__.__proto__);//返回null
其實，S2的原型對象上還有原型對象，因為S2的原型對象也半斤八兩于只是Object對象的一個實例。 -
04
在這里我給大師畫了一張圖，便于大師理解原型鏈。
- End
出格提醒
- 發表于 2018-02-22 00:00
- 閱讀 ( 557 )
- 分類：電腦網絡
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章