首頁 > web前端 > js教程 > 深入淺出理解javaScript原型鏈_javascript技巧

深入淺出理解javaScript原型鏈_javascript技巧

WBOY
發布: 2016-05-16 16:00:04
原創
1297 人瀏覽過

本文實例講述了javaScript的原型鏈。分享給大家供大家參考。具體分析如下:

對於javascript原型鏈,以前都覺得是個很深的東西,一直沒有理解很明白,今天看了一些介紹後,發​​現這張圖,表示再沒有什麼語言能比這張圖說得清楚了。

看了這張圖後突然對javascript有了質的理解。

javascript的原型鏈有顯式和隱式兩種:

顯式原型鏈:即我們常見的prototype;

隱式原型鏈:在一般環境下無法訪問,即不可見,在FireFox下可以透過__proto__方式存取;隱式原型鏈用於javascript引擎內部對原型鏈的搜尋,透過顯示原型鏈來設定;
 
一、prototype和__proto__的概念

prototype是函數的一個屬性(每個函數都有一個prototype屬性),這個屬性是一個指針,指向一個物件。它是顯示修改物件的原型的屬性。

__proto__是一個物件擁有的內建屬性(請注意:prototype是函數的內建屬性,__proto__是物件的內建屬性),是JS內部使用尋找原型鏈的屬性。

用chrome和FF都可以存取到物件的__proto__屬性,IE不可以。

二、new 的過程

var Person = function(){};
var p = new Person();
登入後複製

new的流程拆分成以下三步驟:

(1) var p={}; 也就是說,初始化一個物件p
(2) p.__proto__ = Person.prototype;
(3) Person.call(p); 也就是說構造p,也可以稱為初始化p

關鍵在於第二步,我們來證明:

var Person = function(){};
var p = new Person();
alert(p.__proto__ === Person.prototype);
登入後複製

這段程式碼會回傳true。說明我們步驟2是正確的。

三、例

var Person = function(){};
Person.prototype.sayName = function() {
  alert("My Name is Jacky");
};
Person.prototype.age = 27;
var p = new Person();
p.sayName();
登入後複製

p是一個引用指向Person的物件。我們在Person的原型上定義了一個sayName方法和age屬性,當我們執行p.age時,會先在this的內部查找(也就是建構子內部),如果沒有找到然後再沿著原型鏈向上追溯。

這裡的向上追溯是怎麼向上的呢?這裡就要使用__proto__屬性來連結到原型(也就是Person.prototype)進行查找。最終在原型上找到了age屬性。

希望本文所述對大家的javascript程式設計有所幫助。

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