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 相关文章推荐
按钮JS复制文本框和表格的代码
Apr 01 Javascript
jquery图片切换插件
Mar 16 Javascript
jquery使用ul模拟select实现表单美化的方法
Aug 18 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
vue2.0开发实践总结之入门篇
Dec 06 Javascript
浅谈React + Webpack 构建打包优化
Jan 23 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
默认浏览器设置及vue自动打开页面的方法
Sep 21 Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 Javascript
Vue开发Html5微信公众号的步骤
Apr 11 Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 Javascript
JS实现数组去重的11种方法总结
Apr 04 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 stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
php在线代理转向代码
2012/05/05 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
简单实现python收发邮件功能
2018/01/05 Python
Python用input输入列表的实例代码
2020/02/07 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
法人委托书范本
2014/04/04 职场文书
开学寄语大全
2014/04/08 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
银行竞聘报告范文
2014/11/06 职场文书
余世维讲座观后感
2015/06/11 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
工程主管竞聘书
2015/09/15 职场文书
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB