首頁 > web前端 > js教程 > js原型鏈原理看圖說明_javascript技巧

js原型鏈原理看圖說明_javascript技巧

WBOY
發布: 2016-05-16 17:51:59
原創
1254 人瀏覽過

當初ECMAscript的發明者為了簡化這門語言,同時又保持繼承的屬性,於是就設計了這個鍊錶。 。
在資料結構中學過鍊錶不,鍊錶中有一個位置相當於指針,指向下一個結構體。

於是乎__proto__也是一樣,每當你去定義一個prototype的時候,相當於把該實例的__proto__指向一個結構體,那麼這個被指向結構體就稱為該實例的原型。

文字說起來有點兒繞,看圖片說話

複製程式碼 程式碼如下:

程式碼如下:
var foo = {
x: 10,
y: 20
};

Figure 1. A basic object with a prototype.



當我不指定__proto__的時候,foo也會預留一個這樣的屬性,

如果有明確的指向,那麼這個鍊錶就鏈起來啦。

很明顯,下圖b和c共享a的屬性和方法,同時又有自己的私有屬性。

__proto__預設的也有指向。它指向的是最高級的object.prototype,而object.prototype的__proto__為空。 程式碼如下:


var a = {
x: 10 calculate: function (z) {
return this.x this.y z
}
};
var b = {
y: 20,
__proto__: a };

var c = {
y: 30,
__proto__: a
};

// call the inherited method
b.cal
// call the inherited method
b.cal
b.cal
b.calFigure 2. A prototype chain.



了解__proto__這個屬性連結指標的本質。 。再來理解constructor。
當定義一個prototype的時候,會構造一個原形對象,這個原型對象存儲於構造這個prototype的函數的原形方法之中. 複製程式碼

程式碼如下:


function Foo(y){
this.y = y ;
}

this.y = y ;
}

Foo. prototype.x = 10;

Foo.prototype.calculate = function(z){
return this.x this.y z;
};

var b = new Foo (20); Figure 3. A constructor and objects relationship.

alert(b.calculate(30));

【參考文檔】 http://dmitrysoshnikov.com/ecmascript/javascript-the-core/
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板