JS继承之借用构造函数继承和组合继承


Posted in Javascript onSeptember 07, 2016

借用构造函数继承 

在解决原型中包含引用类型值所带来问题的过程中,开发人员开始使用一种叫做借用构造函数(constructor stealing)的技术(有时候也叫做伪造对象或经典继承)。这种技术的基本思想相当简单,即在子类型构造函数的内部调用超类型构造函数。 

基本模式

function SuperType(){
 this.colors = ["red", "blue", "green"];
}
function SubType(){
  //继承了SuperType
 SuperType.call(this);
}

var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
var instance2 = new SubType();
alert(instance2.colors); //"red,blue,green"

基本思想 

借用构造函数的基本思想就是利用call或者apply把父类中通过this指定的属性和方法复制(借用)到子类创建的实例中。因为this对象是在运行时基于函数的执行环境绑定的。也就是说,在全局中,this等于window,而当函数被作为某个对象的方法调用时,this等于那个对象。call 、apply方法可以用来代替另一个对象调用一个方法。call、apply 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

 

所以,这个借用构造函数就是,new对象的时候(注意,new操作符与直接调用是不同的,以函数的方式直接调用的时候,this指向window,new创建的时候,this指向创建的这个实例),创建了一个新的实例对象,并且执行SubType里面的代码,而SubType里面用call调用了SuperTyep,也就是说把this指向改成了指向新的实例,所以就会把SuperType里面的this相关属性和方法赋值到新的实例上,而不是赋值到SupType上面。所有实例中就拥有了父类定义的这些this的属性和方法。 

优势 

相对于原型链而言,借用构造函数有一个很大的优势,即可以在子类型构造函数中向超类型构造函数传递参数。因为属性是绑定到this上面的,所以调用的时候才赋到相应的实例中,各个实例的值就不会互相影响了。 

例如: 

function SuperType(name){
this.name = name;
}
function SubType(){
//继承了SuperType,同时还传递了参数
SuperType.call(this, "Nicholas");
//实例属性
this.age = 29;
}
var instance = new SubType();
alert(instance.name); //"Nicholas";
alert(instance.age); //29

劣势 

如果仅仅是借用构造函数,那么也将无法避免构造函数模式存在的问题——方法都在构造函数中定义,因此函数复用就无从谈起了。而且,在超类型的原型中定义的方法,对子类型而言也是不可见的,结果所有类型都只能使用构造函数模式。考虑到这些问题,借用构造函数的技术也是很少单独使用的。 

组合继承 

组合继承(combination inheritance),有时候也叫做伪经典继承。是将原型链和借用构造函数的技术组合到一块,从而发挥二者之长的一种继承模式。 

基本思想 

思路是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数复用,又能够保证每个实例都有它自己的属性。 

基本模型

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", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29
var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //27

优势 

组合继承避免了原型链和借用构造函数的缺陷,融合了它们的优点,成为JavaScript 中最常用的继承模式。 

劣势 

组合继承最大的问题就是无论什么情况下,都会调用两次超类型构造函数:一次是在创建子类型原型的时候,另一次是在子类型构造函数内部。虽然子类型最终会包含超类型对象的全部实例属性,但我们不得不在调用子类型构造函数时重写这些属性。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
jQuery实现自动调整字体大小的方法
Jun 15 Javascript
Angularjs 滚动加载更多数据
Mar 17 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
详解微信小程序网络请求接口封装实例
May 02 Javascript
vue组件 keep-alive 和 transition 使用详解
Oct 11 Javascript
JS实现网页端猜数字小游戏
Mar 06 Javascript
Node.js读写文件之批量替换图片的实现方法
Sep 07 #Javascript
jQuery实现底部浮动窗口效果
Sep 07 #Javascript
聊一聊Vue.js过渡效果
Sep 07 #Javascript
BootStrap中的表单大全
Sep 07 #Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 #Javascript
JavaScript 函数模式详解及示例
Sep 07 #Javascript
jquery 属性选择器(匹配具有指定属性的元素)
Sep 06 #Javascript
You might like
如何过滤高亮显示非法字符
2006/10/09 PHP
深入掌握include_once与require_once的区别
2013/06/17 PHP
PHP基于数组实现的分页函数实例
2014/08/20 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
cloudgamer出品ImageZoom 图片放大效果
2010/04/01 Javascript
JQuery学习笔记 nt-child的使用
2011/01/17 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
2019/02/22 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
javascript实现打砖块小游戏(附完整源码)
2020/09/18 Javascript
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
Python下载懒人图库JavaScript特效
2015/05/28 Python
使用Python操作MySQL的一些基本方法
2015/08/16 Python
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
Python 创建空的list,以及append用法讲解
2018/05/04 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
python使用建议与技巧分享(二)
2020/08/17 Python
利用CSS3实现进度条的两种姿势详解
2017/03/21 HTML / CSS
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
中职生自荐信
2013/10/13 职场文书
煤矿班组长岗位职责
2013/12/29 职场文书
成人继续教育实施方案
2014/03/01 职场文书
感恩老师的演讲稿
2014/05/06 职场文书
2015入党自荐书范文
2015/03/05 职场文书
法院执行局工作总结
2015/08/11 职场文书
Python数据清洗工具之Numpy的基本操作
2021/04/22 Python