首頁 > web前端 > js教程 > 主體

javascript中的原型鏈深入理解_基礎知識

WBOY
發布: 2016-05-16 16:58:22
原創
1058 人瀏覽過

要弄清楚原型鏈就要先弄清楚 function 類型,在javascript中沒有類別的概念,都是函數,所以它是一門函數式的程式語言。類別有一個很重要的特性,就是它可以根據它的建構子來建立以它為模板的物件。在javascript中,函數就有2個函數

第一、 作為一般函數呼叫
第二、 作為它原型物件的建構子也就new()

我們來看一個例子

複製程式碼 程式碼如下:

function a){
. name = 'a';
}

當建立一個函數,它會發生什麼事?

第一、它會建立1個函數物件也就是a 本身

第二、它會建立1個原型物件@a(用@來表示)

第三、函數物件會有一個prototype指針,它指向了對應的原型對象,這裡就指向了@a

第四、@a對像中有一個construtor指針,指向它的構造函數,這裡就指向了a 70/ gravity/SouthEast

這個prototype屬性究竟有什麼用呢?

其實prototype 屬性表示目前函數能夠控制的範圍(或說它指明了目前函數是誰的建構子),這裡a就是@a原型物件的建構函數,所以我們會看見有這種寫法



複製程式碼 程式碼如下:
function a(()) .name = 'a';
}

var a1 = new a();



這就和其他常見語言相似了,new 就是調用原型物件(透過prototype指標)裡面建構函數(constructor)建立一個新的物件實例。

那麼修改了prototype指向物件裡面的屬性,也就影響了所有以它為模板建立的實例,我們可以這樣來驗證




複製程式碼 程式碼如下: function a(){
this.name = 'a';
}

this.name = 'a';
}


var a1 = new a();
a.prototype.age = 1;
alert(a1.age);


結果:1

那為什麼a1物件可以直接存取到age屬性呢? a1物件裡面我並沒有定義age屬性啊,

那是因為所有實例裡面都會有一個引用_proto_(在firfox,chrome下可以直接訪問,ie不支援)指向了這個原型,這裡就是指向了@a, 程式碼如下:


function a(){


function a(){

function a(){


function a(){ >this.name = 'a';
}

var a1 = new a();
alert(a1._proto_ == a.prototype)
結果:true 在存取屬性的時候,會先在a1物件內部中尋找,如果沒有,就會順著_proto_指向的物件裡面去尋找,這裡會到@a中尋找,找到就回傳值,沒有找到就回傳undefined,用個成語來形容,就是順藤摸瓜嘛! 至此原型鏈的意義就出來了,由於原型物件也有一個_proto_指針,又指向了另一個原型,一個接一個,就形成了原型鏈。 Object.prototype是最頂層的原型,所以如果修改了Object.prototype的屬性,那就影響了所有的物件。
在來看一段程式碼




複製程式碼


程式碼如下:this.name = 'a';
}

function b(){
this.age = 1;
}

複製程式碼
程式碼如下: b.prototype = new a.prototype>;
如果像上面這麼寫,修改p.prototype中的屬性,那麼a的原型也會改變了,相當於是子類修改了父類,並且子類和父類的屬性糅合在了一起,這顯然是不合適的。換句話說,b也成為了@a的構造函數,a,b成了平級的關係。

我們可以下一個定義:

函數a 繼承函數b 也就是讓函數a成為函數b原型的一個實例的建構函數,建構子裡面宣告的屬性是函數a自己的,原型實例裡面的屬性就是繼承b的
複製程式碼 程式碼如下:

var🎜> 程式碼如下:

//不可能在自己的建構子中又一次建構自己,所以回傳了另一個建構子的實例
return new init(selector,context);
}
jQuery.fn = jQuery.prototype = {
size:function(){
return this.length;
}
}
function in>} ,context){

}
init.prototype = jQuery.fn;;
}


這是jquery的一段源碼,我們在使用jquery的時候,並沒有使用new關鍵字,那它是如何建構物件的呢?
用上面的知識,可以解釋,jquery這裡只是一個一般函數的調用,它返回了jquery原型的另外一個構造函數創建的對象,也就是new init()
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板