JS之原型链

来源:互联网 发布:linux命令选项格式 编辑:程序博客网 时间:2024/06/05 22:39
知道原型链是什么,也知道大概有什么作用,但是就是说不出来,有种只能意会不能言传的赶脚。大写的尴尬!!!但实际上这还是说明自己没有真正弄懂,有句话说的好:如果你不能给6岁小孩讲清楚一个知识点,说明你还没有真正掌握它!
那我今天就努力把它搞明白,争取能给身边的朋友讲明白,告诉你们我们前端也是很有难度的!
闲话少说,进入正题。
原型链的概念
原型链可以指实例与原型之间的关系。
1、先说实例与构造函数之间的关系吧:
每个实例对象都有自己的属性对吧,其中有一个属性叫做隐式原型_proto_,它是所有实例对象具有的属性,这个属性的值指向一个原型对象(不懂原型对象的可以翻到后面看一下哦)。而这个原型对象也有自己的属性对吧,其中有一个属性叫做constructor,它的值指向构造函数
2、好,那现在如果上面提到的原型对象是另一个类型的实例呢?同样的,现在这个原型对象也有一个_proto_属性,其值指向另一个原型对象,是吧。而最后这个原型对象的constructor又会指向另一个构造函数。这样是不是最初的实例跟最后这个构造函数有了某种联系呢?这个联系就是我们所说的原型链
3、同样,当我们上面提到的最后一个原型对象又是另外一个类型的实例,是不是就能够层层递进了,形成一个很长很长的原型链。

上面说的多少有些啰嗦,不如王道(就是图片啦)来的实在。下面是王道:
(今天画图不方便,只好盗用网上的图了。等明天晚上自己画个图更新一下)
第一个图是第一段话(少了最后指向构造函数那步,这就是为啥我要自己画一个了);


第二个图是第二段话。

第三个图是第三段话:

对照看一下,是不是觉得很简单。

原型链的代码实现
function Super(){    this.property=true;}function Sub(){    this.subProperty=false;}Sub.prototype=new Super();var instance= new Sub();alert(instance.subProperty);//false


这里有一张很棒的图,很好的解释了实例对象、函数、对象的关系:
http://www.w3cschool.cn/javascript_prototype/4h73vozt.html

0 0