談談對原型鏈的理解

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

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

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.8kBthis

若是咱們想修改這些屬性,該怎麼操做呢?
以年齡爲例:image_1bfggqa6s12g26oc390qphu5a2n.png-3.7kB
怎麼簡單就成功了? 一分鐘思考一下。prototype

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

var praph1 = new triangle();

image_1bfggrdk6raa13p814a1lqf132l34.png-5.6kB
彷佛有些不對,咱們說好的共享呢? image_1bfgfs70dohmijmndp1rvp14pk1g.png-43.4kBcode

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

那咱們怎麼調用__proto__裏的值,並證實它是共享的呢?
image_1bfgheeah16mv1sudg8v1e351qqf3u.png-6.1kBblog

經過這樣的方法咱們證明了__proto__裏面屬性是共享的,正由於這樣咱們不能隨便去修改 __proto__裏面的屬性和方法。由於一旦修改,同一個構造函數的全部實例,他們的__proto__都會被修改。
並且咱們發現每一個object都有 __proto__,裏面爲咱們提供了一些經常使用的方法。
image_1bfginf8plje16kaeoj1fld14o44b.png-20.7kB

正由於__proto__的共享性質,在代碼中合理的經過prototype來建立方法和屬性,能夠節約內存的儲存空間。

相關文章
相關標籤/搜索