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的监控数据是否发生改变
Apr 11 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
Jun 26 Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
Vue的轮播图组件实现方法
Mar 03 Javascript
微信小程序云开发 生成带参小程序码流程
May 18 Javascript
了解前端理论:rscss和rsjs
May 23 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
基于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
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
php观察者模式应用场景实例详解
2017/02/03 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
Javascript学习笔记二 之 变量
2010/12/15 Javascript
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
javascript中返回顶部按钮的实现
2015/05/05 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
node-red File读取好保存实例讲解
2019/09/11 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
Python处理JSON数据并生成条形图
2016/08/05 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
Django基础三之视图函数的使用方法
2019/07/18 Python
Django设置Postgresql的操作
2020/05/14 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
英国最大的在线照明商店:Litecraft
2020/08/31 全球购物
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
应届生妇产科护士求职信
2013/10/27 职场文书
会计专业自荐信
2013/12/02 职场文书
个人自荐材料
2014/05/23 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
pytorch中[..., 0]的用法说明
2021/05/20 Python
MySQL的索引你了解吗
2022/03/13 MySQL
volatile保证可见性及重排序方法
2022/08/05 Java/Android