JavaScript寄生组合式继承实例详解


Posted in Javascript onJanuary 06, 2018

本文实例讲述了JavaScript寄生组合式继承。分享给大家供大家参考,具体如下:

其实《JavaScript高级程序设计》这本书中已经有完整代码了,只要把代码读懂就知道这个继承是怎么回事。

首先,在js中,给对象定义属性有两种方式:

//通过执行构造函数设置属性
function A(){
  this.a = 1;
}
//通过原型设置属性
A.prototype.b = 1;

所以:

一个类Sub要继承另一个类Super,需要继承父类的prototype下的属性,还要执行一下父类的构造函数。

一个类Sub要继承另一个类Super,既要通过原型链实现对原型属性和方法的继承,又要通过在子类构造函数内调用父类构造函数实现对实例属性的继承

1. 继承prototype下的属性

上面可以看到,Super类的prototype下的属性是没有被继承的,因此下面还需要继承这一部分。

直接「=」肯定不行,因为Sub.prototype中修改属性后,不能影响Super.prototype里面的对象,即不能Sub.prototype=Super.prototype

首先写一个创建对象副本的方法

function object(o){
  function A(){}
  A.prototype = o
  var ox = new A()
  return ox
}

上面的函数得到的对象ox,拥有了对象o的全部属性(在原型链上),而修改ox的属性,不会影响到o,相当于把o复制了一份。

原型式继承就是上面的“object”函数,在很多类库源码中都能发现它的身影

简单而言,原型式继承就是不用实例化父类了,直接实例化一个临时副本实现了相同的原型链继承。(即子类的原型指向父类副本的实例从而实现原型共享)

tips:总所周知,原型链继承是子类的原型指向父类的实例从而实现原型共享,而原型式继承是子类的原型指向父类副本的实例从而实现原型共享

ECMAScirpt 5通过新增Object.create()方法规范化了原型式继承。

使用object方法,就可以将Super.prototype的属性「复制」到Sub.prototype上了,当然这儿还需要修正一下constructor的指向。

function inherit(subType,superType){
 var prototype=Object.create(superType.prototype);
 prototype.constructor=subType;
 subType.prototype=prototype;
}

2. 分别执行父类和子类的构造函数,继承这部分下的属性:

//父类
function Super(){
this.sss=1
}
//子类
function Sub(){
//arguments是Sub收到的参数,将这个参数传给Super
Super.apply(this, arguments)
}
//实例
sub = new Sub()

Super.apply(this, arguments)这一句,将Super类作为一个普通函数来执行,但是Super类的this被换成了Sub类的this,Sub收到的参数也传给了Super

最后执行结果相当于sub.sss=1

附上各种继承方式的特点和优缺点

曾经一段时间因为javascript关于类实现继承的不规范,导致各种各样实现继承的代码;而实际上不管代码怎么变,继承都基于两种方式:

1.通过原型链,即子类的原型指向父类的实例从而实现原型共享。
2.借用构造函数,即通过js的apply、call实现子类调用父类的属性、方法;

原型链方式可以实现所有属性方法共享,但无法做到属性、方法独享(例如Sub1修改了父类的函数,其他所有的子类Sub2、Sub3...想调用旧的函数就无法实现了);

借用构造函数除了能独享属性、方法外还能在子类构造函数中传递参数,但代码无法复用。总体而言就是可以实现所有属性方法独享,但无法做到属性、方法共享(例如,Sub1新增了一个函数,然后想让Sub2、Sub3...都可以用的话就无法实现了,只能Sub2、Sub3...各自在构造函数中新增)。

组合继承就是把以上两种继承方式一起使用,把共享的属性、方法用原型链继承实现,独享的属性、方法用借用构造函数实现,所以组合继承几乎完美实现了js的继承;为什么说是“几乎”?因为认(dan)真(teng)的geek们发现组合继承有一个小bug,实现的时候调用了两次超类(父类),性能上不合格啊有木有!怎么解决呢?于是“寄生继承”就出来了。

寄生继承(原型式继承)就是不用实例化父类了,直接实例化一个临时副本实现了相同的原型链继承。(即子类的原型指向父类副本的实例从而实现原型共享)

“寄生组合继承”用了“寄生继承”修复了“组合继承”的小bug,从而让js完美实现继承了。

实例代码:

function SuperType(name,colors){
  this.name=name;
  this.colors=colors;
}
SuperType.prototype.getSuperProperty=function(){ return this.name; }
function SubType(job,name,colors){
  SuperType.call(this,name,colors);
  this.job=job;
}
SubType.prototype.getSubPrototype=function(){ return this.job; }
function inherit(subType,superType){
  var prototype=Object.create(superType.prototype);
  prototype.constructor=subType;
  subType.prototype=prototype;
}
inherit(SubType,SuperType);
var instance=new SubType("doctor","John",["red","green"]);
console.log(instance.getSubPrototype());  //输出"doctor"
console.log(instance.getSuperProperty());  //输出"John",成功调用在父类原型定义的方法

属性继承代码是SuperType.call(this,name,colors);

原型继承代码是inherit(SubType,SuperType);

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery 核心函数以及jQuery对象
Mar 23 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
Feb 05 Javascript
node+express+jade制作简单网站指南
Nov 26 Javascript
AngularJS中的模块详解
Jan 29 Javascript
js无法获取到html标签的属性的解决方法
Jul 26 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
js实现交通灯效果
Jan 13 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
十个免费的web前端开发工具详细整理
Sep 18 Javascript
详解Vue如何支持JSX语法
Nov 10 Javascript
Vue响应式原理深入解析及注意事项
Dec 11 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 #jQuery
JS实现非首屏图片延迟加载的示例
Jan 06 #Javascript
jQuery中库的引用方法
Jan 06 #jQuery
基于JavaScript中标识符的命名规则介绍
Jan 06 #Javascript
js生成word中图片处理方法
Jan 06 #Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 #Javascript
浅谈webpack对样式的处理
Jan 05 #Javascript
You might like
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
php cookie 详解使用实例
2016/11/03 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
php 遍历目录,生成目录下每个文件的md5值并写入到结果文件中
2016/12/12 PHP
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
python中的五种异常处理机制介绍
2014/09/02 Python
python获取中文字符串长度的方法
2018/11/14 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
详解pyinstaller selenium python3 chrome打包问题
2019/10/18 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
Python 利用flask搭建一个共享服务器的步骤
2020/12/05 Python
python中uuid模块实例浅析
2020/12/29 Python
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
如何利用cmp命令比较文件
2013/09/23 面试题
毕业生求职简历中的自我评价
2013/10/18 职场文书
咖啡厅创业计划书范本
2014/01/22 职场文书
护士自我鉴定怎么写
2014/02/07 职场文书
安全生产专项整治方案
2014/05/06 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
职场领导同事生日简短祝福语
2019/08/06 职场文书