JavaScript-------寄生组合式继承
组合继承在前面有说过,也是JavaScript中最常用的一个继承模式;不过,它也有自己的不足。组合继承最大的问题就是无论什么情况,都会调用两次构造函数:
那我们来回顾下组合式继承基本模式:
function SuperType(name){
this.name = name;
this.colors = ["red","blue","green"];
}
SuperType.prototype.sayName = function(){
alert(this.name);
}
function SubType(name,age){
//继承
SuperType.call(this,name); 第二处
this.age = age;
}
//继承方法
SubType.prototype = new SuperType(); 第一处
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
alert(this.age);
}
var instance1 = new SubType("Nicholas",20);
instance1.colors.push("black");
alert(instance1.colors);
上面红色标识的是调用构造函数的地方,在第一次调用SuperType 函数时,SubType.prototype会得到两个属性: name和colors;它们都是SuperType实例的属性,只不过现在位于SubType原型中。
当调用SubType 构造函数时,会再调用一次SuperType函数,此时实例对象中会得到两个属性:name和colors; 此时相当于在同一个对象和原型中定义了两边相同的属性,不过由于实例中的同名属性会覆盖原型中的属性。
看看下面草图可以能够理解些:
如上图说明:存在两组属性一个原型上,一组是在实例中,这就是两次调用构造函数的结果,不过现在可以使用 寄生组合继承方式来解决;
所谓寄生组合继承:即通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。
背后的基本思路是:不必为了指定子类型的原型而调用超类型的构造函数,我们需要的无非就是超类型原型的一个副本而已。本质上,就是使用寄生式继承来继承超类型的原型,然后再将结果指定给子类型的原型。
基本模式如下:
function inheritPrototype(subType,superType){
var prototype = Object.create(superType.prototype);
prototype.constructor = subType;
subType.prototype = prototype;
}
上面代码是寄生模式最简单组合方式,inheritPrototype() 接收两个参数,一个子类构造函数,父类构造函数,其中第一行代码是创建了一个父类原型对象的副本;第二行代码是修改副本对象的属性值,这里为什么修改想必大家都知道吧! 第三行 把生成好的副本对象赋值给子类的原型。这样就可以用这种方式去替换 前面代码中给原型赋值的语句 SubType.prototype = new SuperType()
看看具体实例:
function SuperType(name){
this.name = name;
this.colors = ["red","blue","green"];
}
SuperType.prototype.sayName = function(){
alert(this.name);
}
function SubType(name,age){
//继承
SuperType.call(this,name); 第二处
this.age = age;
}
//继承方法
//SubType.prototype = new SuperType(); 第一处
inheritPrototype(SubType,SuperType);
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
alert(this.age);
}
这个例子同样完成上一个实例的工作,但是更加高效率的体现在它只调用了一次SuperType()构造函数,并且因此避免了在SuperType.prototype 上面创建了不必要的、多余的属性。与此同时,原型链还能保持不变;因此,还能够使用instanceof 和 isPrototypeOf()。寄生组合式继承是引用类型最理想的继承范式。
JavaScript-------寄生组合式继承的更多相关文章
- JavaScript寄生组合式继承分析
JavaScript寄生组合式继承特点: 避免了在子类prototype上创建不必要多余的属性,相比直接继承基类的实例效率要高. 是JavaScript 实现继承的最有效方式. <script& ...
- JavaScript对寄生组合式继承的理解
有关JavaScript的几种继承方式请移步JavaScript的几种继承方式 原型链的缺陷 SubType.prototype = new SuperType(); 这样做的话,SuperType构 ...
- JavaScript继承基础讲解,原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承
说好的讲解JavaScript继承,可是迟迟到现在讲解.废话不多说,直接进入正题. 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考<面向对象J ...
- javascript中的继承-寄生组合式继承
前文说过,组合继承是javascript最常用的继承模式,不过,它也有自己的不足:组合继承无论在什么情况下,都会调用两次父类构造函数,一次是在创建子类原型的时候,另一次是在子类构造函数内部.子类最终会 ...
- JavaScript高级程序设计之寄生组合式继承
在继承中常会出现两个问题: 父类的属性变成了子类的原型 构造器指向混乱 寄生组合式继承解决了这样的问题: 属性继承到属性 原型继承到原型 构造器指向明确 // 父类 var Super = funct ...
- javaScript设计模式之面向对象编程(object-oriented programming,OOP)--寄生组合式继承
组合式继承:将类式继承同构造函数继承组合使用,但是存在一个问题,子类不是父类的实例,而子类的原型式父类的实例,所以才有了寄生组合式继承. 意思就是说,寄生就是寄生式继承,寄生式继承就是依托于原型继承, ...
- [js高手之路]寄生组合式继承的优势
在之前javascript面向对象系列的文章里面,我们已经探讨了组合继承和寄生继承,回顾下组合继承: function Person( uName ){ this.skills = [ 'php', ...
- js组合继承和寄生组合式继承比较
本文是原创文章,如需转载,请注明文章出处 1.js中实现组合继承(B继承A): function A(name){ this.name = name; this.ary = ["AA&quo ...
- 详解js中的寄生组合式继承
寄生组合式继承是js中最理想的继承方式, 最大限度的节省了内存空间. js中的寄生组合式继承要求是: 1.子对象有父对象属性的副本, 且这些不应该保存在子对象的prototype上. 2. ...
- 寄生组合式继承 js
寄生组合式继承是集寄生式继承和组合继承的优点于一身,是基于类型继承最有效的方式 function object(o){ function F(){}; F.prototype = o; return ...
随机推荐
- SQL Server -ISNULL()函数
SQL中有多种多样的函数,下面将为您介绍SQL中的ISNULL函数,包括其语法.注释.返回类型等,供您参考,希望对您学习SQL能够有所帮助. ISNULL 使用指定的替换值替换 NULL. 语法ISN ...
- 学习unity的第一个小游戏(Roll the ball)的笔记
1.摄像机的跟随运动,逻辑就是保持摄像机跟主角的距离不变(Undate()函数). offset=trandform.position-player.position. Undate() { tran ...
- HTML与JS
网页显示过程中的处理流程: 分析HTML 构造DOM树 载入外部JS文件及CSS文件 载入图像文件等外部资源 JS在分析后开始运行 全部完成 JS的表述方式及其执行流程: <script> ...
- CAS单点登录原理以及debug跟踪登录流程
CAS 原理和协议 基础模式 基础模式 SSO 访问流程主要有以下步骤: 1. 访问服务: SSO 客户端发送请求访问应用系统提供的服务资源. 2. 定向认证: SSO 客户端会重定向用户请求到 SS ...
- hdu 1234
Problem Description 每天第一个到机房的人要把门打开,最后一个离开的人要把门关好.现有一堆杂乱的机房签 到.签离记录,请根据记录找出当天开门和关门的人. Input 测试输入的第一行 ...
- 在Eclipse中运行Nutch2.3
参考http://wiki.apache.org/nutch/RunNutchInEclipse 一.环境准备 1.下载nutch2.3源代码 wget http://mirror.bit.edu.c ...
- [转]JS基础之undefined与null的区别
在JavaScript开发中,被人问到:null与undefined到底有啥区别? 一时间不好回答,特别是undefined,因为这涉及到undefined的实现原理.于是,细想之后,写下本文,请各位 ...
- ecshop中404错误页面设置
在ecshop系统当中,比如你随意将商品详细页面的地址中的ID修改为一个不存在的商品ID,ecshop会自动跳转到首页.ecshop在这方面做得非常的差,甚至导致了很多的站不被搜索引擎收录.最模板提供 ...
- Jasper_table_resolve get multiple copies of table in detail band issue
resolve method: (1) put table component into the Title band / Page Header band / Summary band, not i ...
- Linux免SSH密码登录
SSH免密码登录,做个总结吧! 1.安装SSH服务(略过) 2.场景:需要配置主机A无密码登录主机B 在主机A上执行如下: cd ~/.ssh ssh-keygen -t rsa 生成密钥文件 cp ...