Javascript的原型继承,说清楚
2017-03-31 08:01
363 查看
一直以来对Javascript的原型、原型链、继承等东西都只是会用和了解,但没有深入去理解这门语言关于继承这方面的本质和特点。闲暇之余做的理解和总结,欢迎各位朋友一起讨论。
本文本主要从两段代码的区别说明继承:
从结果可以看出两段代码的运行结果是一致的。
对象是否是父类、子类的实例判断都是一致的
父类、子类都是在对象的原型链上
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(原型)上增加的方法或者属性会直接影响到父类;而第二段代码的则不会。
本文本主要从两段代码的区别说明继承:
一、第一段代码:
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(原型)上增加的方法或者属性会直接影响到父类;而第二段代码的则不会。
相关文章推荐
- javascript prototype的深度探索不是原型继承那么简单第1/3页
- JavaScript原型继承小记
- javascript 用原型继承来实现对象系统
- JavaScript 原型与继承说明
- JavaScript 原型 继承
- 如何利用javascript中的原型实现继承
- JavaScript中的对象和原型链,函数继承(转)
- Javascript--原型链实现继承
- Javascript--原型链实现继承
- JavaScript原型 继承
- JavaScript继承之闭包原型继承法
- Javascript 原型和继承(Prototypes and Inheritance)
- Javascript 原型和继承(Prototypes and Inheritance)
- Javascript对象原型prototype和继承
- javascript 基于原型的知识--如何实现继承
- javascript prototype的深度探索不是原型继承那么简单第1/3页
- Javascript 原型和继承(Prototypes and Inheritance)
- 浅析Javascript原型继承 推荐第1/2页
- Javascript 原型和继承(Prototypes and Inheritance)
- 再谈Javascript原型继承