當前位置:才華齋>設計>網頁設計>

JavaScript中的原型鏈prototype詳解

網頁設計 閱讀(2.18W)

JavaScript中的繼承是通過原型鏈(prototype chain)來完成的:每個物件內部都有另外一個物件作為其prototype而存在,物件從這個prototype中繼承屬性(property)。對於每個物件來說,可以用以下三種方式來訪問其原型物件:

JavaScript中的原型鏈prototype詳解

1.__proto__。可以通過物件的__proto__屬性來訪問其原型物件。該屬性僅在Firefox、Safari和Chrome中得到支援,在IE和Opera中不支援。

rototypeOf()。可以將物件作為引數傳入rototypeOf()方法,執行後即返回物件的原型物件。此方法僅在ECMAScript 5標準中得到支援。

otype。通過先獲取物件的constructor函式,然後再通過訪問constructor函式的prototype屬性來訪問到原型物件。使用此方法的前提為:物件中存在指向建構函式的constructor屬性。

判斷兩個物件間是否存在原型鏈關係可以使用isPrototype()方法:

複製程式碼 程式碼如下:

var p = {x:1};

var o = te(p);

(ototypeOf(o));//true

對於所有用字面量建立的`物件而言,其prototype物件均為otype(作為一個特殊物件,otype沒有原型物件):

複製程式碼 程式碼如下:

var x = {a:18, b:28};

(x.__proto__);//Object {}

而對於所有用new操作符建立的物件而言,其prototype物件均為constructor函式的prototype屬性:

複製程式碼 程式碼如下:

var x = {a:18, b:28};

function Test(c){

this.c = c;

}

otype = x;

var t = new Test(38);

(t);//Object {c=38, a=18, b=28}

(t.__proto__);//Object {a=18, b=28}

(t.__proto__.__proto__);//Object {}

JavaScript中使用new操作符建立物件的過程如下:

1.建立一個新的空物件。

2.將這個物件的__proto__屬性指向constructor函式的prototype屬性。

3.將這個物件作為this引數,執行constructor函式。

從上述建立過程可以得出結論:所有從同一個constructor函式中構造出來的物件,其__proto__屬性(也即其原型物件)相等,也就是說,只存在一個原型物件:

複製程式碼 程式碼如下:

var t = new Test(38);

var t2 = new Test(68);

(t === t2);//false

(t.__proto__ === t2.__proto__);//true