原型链继承属性的理解

2018-09-28

本文总阅读量:

今天在看书的时候遇到关于原型链的这样一段代码,不是很理解,后来想明白了,再次记录一下

function SuperType(){
    this.property = true;
}
SuperType.prototype.getSuperValue = function(){
    return this.property;
};
function SubType(){
    this.subproperty = false;
}
//继承了 SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
    return this.subproperty;
};
var instance = new SubType();
alert(instance.getSuperValue());
//true

主要不理解在为什么instance可以获取到property的值,后来才发现原来在

SubType.prototype = new SuperType()

的时候,已经将SuperType中的属性全部浅拷贝给了SubType.prototype,也就是说此时SuperType和SubType.prototype相当于兄弟俩,基本长得一样,property这个属性在SubType.prototype中存在了,当执行

var instance = new SubType();

相当于SubType中的属性全部浅拷贝给了instance,也就是说此时SubType和instance相当于兄弟俩,SubType.prototype和instance.proto相等,当instance找不到property属性时,去SubType.prototype找到了,所以才有输出,所以其实输出的property属性是SubType.prototype的,不是SuperType的,把图补全了即可看懂

1

这个结构画的层次不够明显,下图我又重新描绘了下,其实是一种树的形态

2