Javascript的原型继承，说清楚
一直以来对Javascript的原型、原型链、继承等东西都只是会用和了解，但没有深入去理解这门语言关于继承这方面的本质和特点。闲暇之余做的理解和总结，欢迎各位朋友一起讨论。
本文本主要从两段代码的区别说明继承：
一、第一段代码：
function Parent(){
this.Name='parent';
}
Parent.prototype.getName = function(){
return this.Name;
}
Parent.prototype.Share = ["Share"];
function Child(){
Parent.call(this)
this.Age = 'Age'
}
Child.prototype = Parent.prototype; //原型继承
var _child = new Child();
var _parent = new Parent();
Parent.prototype.Foo = "Foo";
_parent.Share.push('second');
console.log(_child.Share);
console.log("_child instanceof Child: " + ( _child instanceof Child ));
console.log("_child instanceof Parent: " + ( _child instanceof Parent));
console.log("Child.prototype.isPrototypeOf(_child): " + Child.prototype.isPrototypeOf(_child));
console.log("Parent.prototype.isPrototypeOf(_child): " + Parent.prototype.isPrototypeOf(_child));
console.log("_child.hasOwnProperty('Share'): " + _child.hasOwnProperty('Share'));
console.log("_parent.hasOwnProperty('Share'): " + _parent.hasOwnProperty('Share'));
console.log("_child.hasOwnProperty('Name'): " + _child.hasOwnProperty('Name'));
console.log("_parent.hasOwnProperty('Name'): " + _parent.hasOwnProperty('Name'));二、第二段代码：
function Parent(){
this.Name='parent';
}
Parent.prototype.getName = function(){
return this.Name;
}
Parent.prototype.Share = ["Share"];
function Child(){
Parent.call(this)
this.Age = 'Age'
}
function Inher(supers, childs) {
function F(){}
F.prototype = supers.prototype;
F.prototype.constructor = childs;
return new F();
}
Child.prototype = Inher(Parent,Child); //原型对象继承
var _child = new Child();
var _parent = new Parent();
_parent.Share.push('second');
Parent.prototype.Foo = "Foo";
console.log(_child.Share);
console.log("_child instanceof Child: " + (_child instanceof Child));
console.log("_child instanceof Parent: " + (_child instanceof Parent));
console.log("Child.prototype.isPrototypeOf(_child): " + Child.prototype.isPrototypeOf(_child));
console.log("Parent.prototype.isPrototypeOf(_child): " + Parent.prototype.isPrototypeOf(_child));
console.log("_child.hasOwnProperty('Share'): " + _child.hasOwnProperty('Share'));
console.log("_parent.hasOwnProperty('Share'): " + _parent.hasOwnProperty('Share'));
console.log("_child.hasOwnProperty('Name'): " + _child.hasOwnProperty('Name'));
console.log("_parent.hasOwnProperty('Name'): " + _parent.hasOwnProperty('Name'));三、运行结果：
从结果可以看出两段代码的运行结果是一致的。
- 对象是否是父类、子类的实例判断都是一致的
- 父类、子类都是在对象的原型链上
- prototype（原型）上的属性通过hasOwnProperty判断是false
- 通过构造函数创建的属性，可以通过HasOwnProperty决断为true的
不同之处：
- 代码不同之处在于：第一段代码Child.prototype是直接被赋值为Parent.prototype的，而第二段代码Child.prototype被赋值为一个Parent的实例对象
- 上图说明：左侧为第一段代码；右侧为第二段
- 从上图可以看出第一段代码的原型链只有两层，也就是Child和Parent共用一层原型链，第二段代码的原型链有三层，Child、Parent、Object。如果是多级继承，第一段代码的模式原始链始终只有两层，而第二段代码的模式原型会有层级关系。
- 原因：function被实例化时，先创建一个对象，然后复制function的构造器的prototype属性上的所有内容到__proto__（后续的原型链），如果复制是一个对象，这个对象也有自己的原型链(proto），所以原型链就形成了。如果子类的prototype指向父类的prototype，这样prototype处于共存状态则原型链不清晰。
- 重点区别（第二天的理解）！！: 第一段代码在子类的prototype(原型)上增加的方法或者属性会直接影响到父类；而第二段代码的则不会。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-03-31 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录