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 相关文章推荐
使一个函数作为另外一个函数的参数来运行的javascript代码
Aug 13 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
js showModalDialog参数的使用详解
Jan 07 Javascript
使用GruntJS构建Web程序之安装篇
Jun 04 Javascript
node.js中的http.createClient方法使用说明
Dec 15 Javascript
基于javascript实现单选及多选的向右和向左移动实例
Jul 25 Javascript
浅谈JS继承_借用构造函数 & 组合式继承
Aug 16 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 Javascript
javascript填充默认头像方法
Feb 22 Javascript
js+html5实现手机九宫格密码解锁功能
Jul 30 Javascript
vue导出html、word和pdf的实现代码
Jul 31 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
Dec 10 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
虹吸壶是谁发明的?煮出来的咖啡好喝吗
2021/03/04 冲泡冲煮
PHP和.net中des加解密的实现方法
2013/02/27 PHP
PHP中对于浮点型的数据需要用不同的方法解决
2014/03/11 PHP
javascript数组使用调用方法汇总
2007/12/08 Javascript
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
tangram框架响应式加载图片方法
2013/11/21 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
2016/08/11 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
在Django框架中运行Python应用全攻略
2015/07/17 Python
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
Python3爬虫教程之利用Python实现发送天气预报邮件
2018/12/16 Python
对于Python深浅拷贝的理解
2019/07/29 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
如何提高JDBC的性能
2013/04/30 面试题
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
财务人员个人求职信范文
2013/12/04 职场文书
学校十一活动方案
2014/02/01 职场文书
公务员中国梦演讲稿
2014/08/19 职场文书
免职通知
2015/04/23 职场文书
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript