谈谈对原型链的理解

在看《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来建立方法和属性,能够节约内存的储存空间。

相关文章
相关标签/搜索