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 相关文章推荐
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 Javascript
JavaScript中数组slice和splice的对比小结
Sep 22 Javascript
Angularjs实现搜索关键字高亮显示效果
Jan 17 Javascript
微信小程序 setData使用方法及常用错误解决办法
May 11 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
Vue 使用formData方式向后台发送数据的实现
Apr 14 Javascript
angular 服务随记小结
May 06 Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 Javascript
vue-cli 关闭热更新操作
Sep 18 Javascript
jQuery zTree如何改变指定节点文本样式
Oct 16 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
PHP处理postfix邮件内容的方法
2015/06/16 PHP
php递归函数怎么用才有效
2018/02/24 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
简单通用的JS滑动门代码
2008/12/19 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
js判断浏览器是否支持严格模式的方法
2016/10/04 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
浅谈Vue使用Elementui修改默认的最快方法
2020/12/05 Vue.js
python3简单实现微信爬虫
2015/04/09 Python
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
浅谈Django REST Framework限速
2017/12/12 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
Python 转换文本编码实现解析
2019/08/27 Python
Python中six模块基础用法
2019/12/08 Python
PyTorch中permute的用法详解
2019/12/30 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
顶撞老师检讨书
2014/02/07 职场文书
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
中学政教处工作总结
2015/08/13 职场文书
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python