web前端：理解js原型鏈

工具/材料

javascript

操作方法

學習原型鏈之前我們先認識一下構造函式，程式碼如下：

function S() {
= 'xxx';
= function() { () }
}
var s1 = new S();

其中，s1是S的例項，s1的__proto__（大家先不用管__proto__屬性，後續會講到）中有一個constructor（建構函式）屬性，該屬性指向S。
在這裡，大家可以記住兩點：
1.s1是建構函式S的例項；
2.s1.__proto__tructor===S 也可以寫成 tructor===S;

接下來我們來看下一段程式碼：

function S2() {}
= 'XXX';
= function() {
();
}

var s2 = new S2();
var s3 = new S2();
(ame === ame);//true
(s2.__proto__===otype);//true

這一段程式碼中我們可以看到一個新屬性——prototype，這是什麼呢，其實這就是建構函式S2的原型物件，每個物件都有__proto__屬性，但是隻有函式物件才有prototype屬性。而s2是建構函式S2的例項，而s2.__proto__指向的就是S2的原型物件，即s2.__proto__===otype。得到一個結論，例項的__proto__屬性指向的就是其建構函式的原型物件。

繼續上一步的程式碼，我們新增程式碼繼續除錯：

(s2.__proto__);//返回S2的原型物件
(otype);//返回S2的原型物件

(s2.__proto__.__proto__);//返回Object物件
(otype.__proto__);//返回Object物件

(s2.__proto__.__proto__.__proto__);//返回null
(otype.__proto__.__proto__);//返回null

其實，S2的原型物件上還有原型物件，因為S2的原型物件也相當於只是Object物件的一個例項。

在這裡我給大家畫了一張圖，便於大家理解原型鏈。

特別提示

碼子不易，小編如有說得不對的地方，望大家指點包含，謝謝