談談對原型鏈的理解


在看《JavaScript面向對象編程指南》的第六章中的繼承,引深了思考對prototype和new的思考。以下內容若有不妥,請盡情指出來。

先解釋一下原型鏈
對象有一系列屬性,其中有一個隱藏的屬性__proto__,它連接實例和原型。首先來看它是怎么連接的呢。
下面看代碼:

function Shape(){
    this.name = "shape";
};
Shape.prototype.heigh = 34; 
function twoDshape(){
    this.age = 24;
}
function triangle(){
    this.side = 3;
}
twoDshape.prototype = new Shape();
twoDshape.prototype.constructor = twoDshape;
triangle.prototype = new twoDshape();
triangle.prototype.constructor = triangle;
var praph = new triangle();
var praph1 = new triangle();

我們來看 praph
image_1bff59s3d1rje21d4nfvni1f9gm.png-11.8kB

函數通過prototype賦值,在函數內也會有一個相應的__proto__屬性,指向構造器函數的相應屬性,這樣形成了一條原型鏈。
image_1bfh19aea11o3hmu14nn1gt0fcsm.png-26.6kB

下面我們通過一些問題和例子來討論原型鏈共享屬性和方法的作用:
__proto__中的屬性是怎么被調用的呢???
我們通過 praph.屬性名 就可以了,而且獲取的值也和我們賦值的相同。
image_1bfggoml3148g5ts1glg54l1isl2a.png-6.8kB

如果我們想修改這些屬性,該怎么操作呢?
以年齡為例:image_1bfggqa6s12g26oc390qphu5a2n.png-3.7kB
怎么簡單就成功了? 一分鍾思考一下。

由於原型鏈上的屬性是會被實例所共享的,那我們定義一個新的實例praph1來測試一下,這個共享的屬性是否被修改了呢?

var praph1 = new triangle();

image_1bfggrdk6raa13p814a1lqf132l34.png-5.6kB
似乎有些不對,我們說好的共享呢? image_1bfgfs70dohmijmndp1rvp14pk1g.png-43.4kB

我們再來檢查praph和praph1這兩個實例
image_1bfggsmsp11lt1rrg1rcu1lhg1c3d3h.png-6.3kB
praph在原來的基礎上加上了一個age屬性。why?
我們發現我定義一個普通的對象,我們只需要通過 對象名.屬性名 的方式,就可以添加新的屬性。

那我們怎么調用__proto__ 里的值,並證明它是共享的呢?
image_1bfgheeah16mv1sudg8v1e351qqf3u.png-6.1kB

通過這樣的方法我們證實了 __proto__里面屬性是共享的,正因為這樣我們不能隨便去修改 __proto__ 里面的屬性和方法。因為一旦修改,同一個構造函數的所有實例,他們的 __proto__都會被修改。
而且我們發現每個object都有 __proto__ ,里面為我們提供了一些常用的方法。
image_1bfginf8plje16kaeoj1fld14o44b.png-20.7kB

正因為 __proto__的共享性質,在代碼中合理的通過prototype來創建方法和屬性,可以節約內存的儲存空間。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM