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 相关文章推荐
文本框中,回车键触发事件的js代码[多浏览器兼容]
Jun 07 Javascript
JS实现模仿微博发布效果实例代码
Dec 16 Javascript
JS判断页面是否出现滚动条的方法
Jul 17 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 Javascript
小程序实现悬浮搜索框
Jul 12 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
Vue 刷新当前路由的实现代码
Sep 26 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
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
8个出色的WordPress SEO插件收集
2011/02/26 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
JavaScript静态的动态
2006/09/18 Javascript
js中有关IE版本检测
2012/01/04 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
在Vue项目中引入腾讯验证码服务的教程
2018/04/03 Javascript
node中modules.exports与exports导出的区别
2018/06/08 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
荷兰皇家航空公司官方网站:KLM Royal Dutch Airlines
2017/12/07 全球购物
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
大学毕业生自我鉴定
2013/11/05 职场文书
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
全民健身日活动方案
2014/01/29 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
海洋科学专业求职信
2014/08/10 职场文书
停车位租赁协议书
2014/09/24 职场文书
学校中秋节活动总结
2015/03/23 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
Python利用folium实现地图可视化
2021/05/23 Python
Python序列化与反序列化相关知识总结
2021/06/08 Python
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis