彻底理解js面向对象之继承_第1页
彻底理解js面向对象之继承_第2页
彻底理解js面向对象之继承_第3页
彻底理解js面向对象之继承_第4页
彻底理解js面向对象之继承_第5页
全文预览已结束

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

1、彻底理解js面向对象之继承说道这个继承,了解j的朋友都知道,大多语言都有两种,一种是接口继承(只继承方法签名);一种是实现继承(继承实际的方法)奈何js中没有签名,因而只有实现继承,而且靠的是原型链实现的。下面正式的说一jS中继承那点事儿1、原型链原型链:实现继承的主要方法,利用原型让一个引用类型继承另一个引用类型的属性和方法。回顾:构造函数,原型,实例三者的关系每一个构造函数都有一个原型对象sp原型对象都包含指向构造函数的指针S;每个实例都包含指向原型对象的指针看不见的指针原型链是怎么来的呢?某个构造函数的原型对象是另一个构造函数的实例;这个构造函数的原型对象就会有看不见的指针指向另一个构造

2、函数的原型对象;那么另一个原型对象又是其他的构造函数实例又会怎么样,就这样层层递进,形成原型链;来具体看一下吧第一个构造函数有一个属性和一个原型方法perty=true;第二个构造函数目前有一个属性继承了/原型成了的实例实际就是重写的原型对象给原型对象继承了现在这个构造函数有两个属性一个本身的S一个继承的存在原型对象的两个方法一个原型对象的一个原型对象的原型对象的创建第二个构造函数的实例原型对象的原型对象显然是存在的注意:iS的S现在指向的是这个构造函数;因为原来的被重写了,其内部的S也就随着;至于原型搜索机制是怎么样运行的,请仔细看上面的代码,相信你是可以的先查找S这个实例有没有此方法显然没

3、有,再查找原型对象有没有此方法也没有,再查找1.完1整的原型的原型对象的S指向构造函数在原型那节已经提了些,还是再说一下。完整的原型包括j。所有函数的默认原型都是j的实例;每个默认原型都有个指针指向j因此自定义类型都继承如的方法而j的指针指向来结束原型链。以S勾造函数为例,看看完整的原型链图1.2原型和实例的关系判断第一种使用instanceof操作符:测试实例和原型链中出现的构造函数,结果为true第二种使用isPrototypeOf()方法:只要是原型链中出现过的原型,都可以说是该原型链所派生的实例的原型console.1og(instanceinstanceofObject)/者8为tr

4、ueconsole.1og(instaneeinstanceofSuperType)console.1og(instaneeinstanceofSubType)console.1og(Ototype.isPrototypeOf(instanee)/都为trueconsole.1og(SuperTtotype.isPrototypeOf(instanee)console.1og(SubTtotype.isPrototypeOf(instanee)1.3谨慎定义方法注意:给原型对象添加方法,一定放在替换原型的后面,因为放在替换原型之前是找不到了,原型会被重写的;注意:在通过原型链继承时,不能使用对

5、象字面量创建原型方法,因为也会重写原型链;functionSuperType()perty=true;DDDDSuperTtotype.getSuperValue=function()pertyDDDDfunctionSubType()this.subproperty=falseDDDD继/承/SuperTypeSubTtotype=newSuperType()DDDD叮口使用字面量添加新方法导致上一行无效口因为现在的原型替换了bjec实例而非superType的实例,关系中断叮叮subTtotype=DDDDDDQgeDSubvaiue:funcDion()叮叮叮口叮叮return叮his.

6、subproperty;DDDDDDDQDDDDDDDsomoDherMeDhOd:funcQion()叮叮叮口叮叮return口falseDDDDDDQQDDQ;DDDDvarDinsDance=newQSubType()叮叮consoie.iog(instance.getsupervaiue()叮/error1.4原型链的问题1、包含引用类型值的原型:当实例是另一函数的原型时,引用类型值就会变成原型上的属性,就会被另一函数的实例所共享。叮叮function口superType()DDDDDDDDhiSDcoiors=yeiiowDredQoiiveQDDQ叮叮function口subTyp

7、e()QDDQ叮叮subTtotype=newusuperType(实际上就是原型上的了DDDDvarDinstanceD=newQsubType()叮叮instancei.coiors.push(purpie)DDDDvarDinstance2=newQsubType()叮叮consoie.iog(instancei.coiors=instance2.coiors)叮/true2、创建子类型实例时,不能向超类型的构造函数传递参数(没有办法在不影响所有对象实例的情况下,给超类型的构造函数传递参数)2、借助构造函数为了解决原型中包含引用类型值带来的问题,利用构造函数来解决在子类型构造函数的内部调

8、用超类型构造函数(函数是特定环境中执行代码的对象,P可以或通过l用)叮叮function口superType()DDDDDDDDthiSDcoior=yeiiowDredQoiiveQDDQ叮叮function口subType()叮叮口止眯承了superTypeDDDDDDDDsuperTypeQcaii(this)QDDQDDDDvarDinstanceD=newQsubType()叮叮instancei.coior.push(purpie)DDDDvarDinstance2=newQsubType()叮叮consoie.iog(instancei.coior)叮/yeiiow,red,oi

9、ive,purpieDDDDconsoieDiog(instance2Dcoior)DD/yeiiowDredQoiive口叮传递参数叮叮function口superType(name)DDDDDDDthiSQname=nameQDDQ叮叮function口subType()DDDDDDDDsuperTypeDcaii(thiSQdoubie)DDDDDDDDthiSDage=Q2QDDQDDDDvarDinstanceD=newQsubType()叮叮consoie.iog()叮/double叮叮consoie.iog(instancei.age)叮/12问题:仅仅借鉴构造函数,那么避免不了

10、构造函数的问题,方法都在构造函数定义了,函数无法复用3、组合继承(常用的还是组合,和原型与构造结合一样)DDDDfunctionQsuperType(name)DDDDDDDDthiSQname=name;DDDDDDDDthiSDcoior=yeiiowDredQoiive;QDDQ叮叮superTtotype.sayName=function()叮叮叮叮consoie.iog();叮叮D叮叮function叮ubType(name,age)叮叮口继承属性创建属性副本superType.call(this,name);this.age=age;DDDD叮口继承属性和方法只是原型中属性被后来的

11、函数调用生成的属性副本遮盖subTtotype=newsuperType();叮叮aiert(subTtotype.constr指向的是superType叮叮subTtotype.constructor=sub将皿irntruct回归到subType构造函数身上叮叮subTtotype.sayAge=function()叮叮叮叮consoie.iog(this.age)DDQQDDDDDDDDvarinstance1=newSubType(double,23)instance1.color.push(pink)console.log(instance1.color)/yellow,red,ol

12、ive,pinkinstance1.sayName()/doubleinstance1.sayAge()/23varinstance2=newSubType(single,34)console.log(instance2.color)/yellow,red,oliveinstance2.sayName()/singleinstance2.sayAge()/34还有其他的继承,花点时间写一下1、原型式继承克罗克福德写的;借助原型可以基于已有的对象创建新对象,同时不必创建自定义类型functionobject(o)/本质上object(函数对其中对象的浅复制functionF()/创建一个新的构造

13、函数F.prototype=o/构造函数原型为传入的对象returnnewF()/返回构造函数的实例varperson=name:double,friends:tom,jack,mikevarperson1=object(person)/事实上为原型共享=greyperson1.friends.push(single)console.log(person1.friends)/tom,jack,mike,singlevarperson2=object(person)=redconsole.log(person2.friends)/tom,jack,mike,singleES5为了规范原型式的继承

14、,有个Object.create(来方便,IE9以上可以;只是想一个对象和另一个对象保持类似的情况,完全可以这种方法varperson=name:double,friends:tom,jack,mikevarperson1=Object.create(person)=singleperson1.friends.push(singles)varperson2=Object.create(person)console.log(person1.friends=person2.friends)/trueObject.create()接受两个参数,一个为作为新对象原型的对象,一个为新对象定义额外属性对象

15、varperson=name:double,friends:tom,jack,mikevarperson1=Object.create(person,name:value:single海个属性都是通过自己描述符定义的)2、寄生式继承思路和原型式继承一脉相承,创建一个用于封装继承过程的函数,内部通过方式增强对象,返回对象;主要考虑对象时使用functionobject(o)functionF()F.prototype=oreturnnewF()functioncreatePerson(original)varclone=object(original)/继承原型clone.sayName=fun

16、ction()alert(name)returnclonevarperson=name:double,friends:single,tom,jackvarperson1=createPerson(person)person1.sayName()/name引用类型值还是共享的3、寄生组合继承组合继承是继承中常常用到的,但是会调用两次超类型构造函数;寄生组合继承就是为了解决这个问题的functionobject(o)functionF()F.prototype=oreturnnewF()functioninheritPrototype(subType,superType)varprototype=object(superType)创建对象(superType实例)prototype.constructor=subType/增强对象subTtotype=prototype/指定对象(原型赋予实例)functionSuperType(name,sex)=namethis.sex=sexthis.colors=redSuperTtotype.sayName=function()alert()functionSubType(name,sex,age)SuperType.call(this,name,sex)this.age=ageinheritPrototype(SubT

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论