彻底理解js面向对象之继承(2)

function SuperType(){ this.color=["yellow","red","olive"] } function SubType(){ //继承了SuperType SuperType.call(this) } var instance1=new SubType() instance1.color.push("purple") var instance2=new SubType() console.log(instance1.color) //["yellow","red","olive","purple"] console.log(instance2.color) //["yellow","red","olive"] //传递参数 function SuperType(name){ this.name=name } function SubType(){ SuperType.call(this,"double") this.age=12 } var instance1=new SubType() console.log(instance1.name) //double console.log(instance1.age) //12

问题:仅仅借鉴构造函数,那么避免不了构造函数的问题,方法都在构造函数定义了,函数无法复用

3、组合继承(常用的还是组合,和原型与构造结合一样)

function SuperType(name){ this.name=name; this.color=["yellow","red","olive"]; } SuperType.prototype.sayName=function(){ console.log(this.name); } function SubType(name,age){ //继承属性,创建属性副本 SuperType.call(this,name); this.age=age; } //继承属性和方法,只是原型中属性被后来的函数调用生成的属性副本遮盖 SubType.prototype=new SuperType(); alert(SubType.prototype.constructor) //指向的是SuperType SubType.prototype.constructor=SubType; //将constructor回归到SubType构造函数身上 SubType.prototype.sayAge=function(){ console.log(this.age) } var instance1=new SubType("double",23) instance1.color.push("pink") console.log(instance1.color) //["yellow","red","olive","pink"] instance1.sayName() //double instance1.sayAge() //23 var instance2=new SubType("single",34) console.log(instance2.color) //["yellow","red","olive"] instance2.sayName() //single instance2.sayAge() //34

还有其他的继承,花点时间写一下

1、原型式继承

克罗克福德写的;借助原型可以基于已有的对象创建新对象,同时不必创建自定义类型

function object(o){ //本质上object()函数对其中对象的浅复制 function F(){} //创建一个新的构造函数 F.prototype=o //构造函数原型为传入的对象 return new F() //返回构造函数的实例 } var person={ name:"double", friends:["tom","jack","mike"] } var person1=object(person) //事实上为原型共享 person1.name="grey" person1.friends.push("single") console.log(person1.friends) //["tom", "jack", "mike", "single"] var person2=object(person) person2.name="red" console.log(person2.friends) //["tom", "jack", "mike", "single"]

ES5为了规范原型式的继承,有个Object.create()来方便,IE9以上可以;只是想一个对象和另一个对象保持类似的情况,完全可以这种方法

var person={ name:"double", friends:["tom","jack","mike"] } var person1=Object.create(person) person1.name="single" person1.friends.push("singles") var person2=Object.create(person) console.log(person1.friends==person2.friends) //true //Object.create()接受两个参数,一个为作为新对象原型的对象,一个为新对象定义额外属性对象 var person={ name:"double", friends:["tom","jack","mike"] } var person1=Object.create(person,{ name:{ value:"single" //每个属性都是通过自己描述符定义的 } })

2、寄生式继承

思路和原型式继承一脉相承,创建一个用于封装继承过程的函数,内部通过方式增强对象,返回对象;主要考虑对象时使用

function object(o){ function F(){} F.prototype=o return new F() } function createPerson(original){ var clone=object(original) //继承原型 clone.sayName=function(){ alert("name") } return clone } var person={ name:"double", friends:["single","tom","jack"] } var person1=createPerson(person) person1.sayName() //name 引用类型值还是共享的

3、寄生组合继承

组合继承是继承中常常用到的,但是会调用两次超类型构造函数;寄生组合继承就是为了解决这个问题的

function object(o){ function F(){} F.prototype=o return new F() } function inheritPrototype(subType,superType){ var prototype=object(superType) //创建对象 (superType实例) prototype.constructor=subType //增强对象 subType.prototype=prototype //指定对象 (原型赋予实例) } function SuperType(name,sex){ this.name=name this.sex=sex this.colors=["red"] } SuperType.prototype.sayName=function(){ alert(this.name) } function SubType(name,sex,age){ SuperType.call(this,name,sex) this.age=age } inheritPrototype(SubType,SuperType) //目前subType.prototype什么都没有 SubType.prototype.sayAge=function(){ //为subType.prototype添加个方法 alert(this.age) } var person1=new SubType("double","man",34) console.log(person1.name) //SuperType 这是个Bug console.log(person1.sex) //man console.log(person1.colors) //["red"] person1.sayAge() //34

到此,差不多结束啦,感谢你对脚本之家的支持,希望我们整理的内容能够帮助到你。

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/ppdjy.html