浅谈JS继承_借用构造函数 & 组合式继承


Posted in Javascript onAugust 16, 2016

2.借用构造函数

为解决原型中包含引用类型值所带来的问题, 我们使用一种叫做 借用构造函数(constructor stealing)的技术(又叫伪造对象或经典继承)。

这种技术的基本思想:在子类构造函数内部调用超类型构造函数。

通过使用apply()和call()方法可以在新创建的子类对象上执行构造函数。

function SuperType(){
  this.colors = ["red", "blue", "green"];
}

function SubType(){
  //继承了 SuperType
  SuperType.apply(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

在上述例子中,实际上是在新创建的SubType实例(instance1 instance2)的环境下调用了SuperType的构造函数。这样一来,就会在新SubType对象上执行SuperType()函数中定义的所有对象初始化代码。 所以Subtype的每个实例就都会具有自己的colors属性的副本了。

传递参数

对于原型链来讲,借用构造函数有一个很大的优势,即可以在子类型构造函数中想超类型构造函数传递参数。

function SuperType(name){
  this.name = name;
}

function SubType(){
  SuperType.call(this, "Bob");
  this.age = 18;
}

var instance1 = new SubType();
alert(instance1.age);  //18
alert(instance1.name);  //Bob

借用构造函数的问题:

方法都在构造函数中定义,因此函数复用就无从谈起了。而且,在超类型的原型中定义的方法,对子类型而言也是不可见的。

3. 组合继承

组合继承(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.sayAge = function(){
  alert(this.age);
}

var instance1 = new SubType("Bob", 22);
instance1.colors.push("black");
alert(instance1.colors);   //red,blue,green,black
instance1.sayName();     //Bob
instance1.sayAge();     //22

var instance2 = new SubType("Alice", 21);
alert(instance2.colors);  //red,blue,green
instance2.sayName();    //Alice
instance2.sayAge();     //21

在这个例子中, SuperType构造函数定义了两个属性: name和colors。 SuperType的原型定义了一个方法sayName()。

SubType构造函数在调用SuperType构造函数时传入了name参数,定义了他自己的属性age。然后将SuperType的实例赋值给SubType的原型。在该原型上定义了方法sayAge()。

这样一来,就可以让两个不同的SubType实例既分别拥有自己的属性 - 包括colors属性,又可以使用相同的方法。

以上这篇浅谈JS继承_借用构造函数 & 组合式继承就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery :first选择器使用介绍
Aug 09 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
May 28 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
Jun 10 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
jQuery Mobile操作HTML5的常用函数总结
May 17 Javascript
前端js弹出框组件使用方法
Aug 24 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
Dec 25 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
JavaScript门道之标准库
May 26 Javascript
pm2发布node配置文件ecosystem.json详解
May 15 Javascript
JS读写CSS样式的方法汇总
Aug 16 #Javascript
浅谈JS继承_寄生式继承 & 寄生组合式继承
Aug 16 #Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 #Javascript
jQuery3.0中的buildFragment私有函数详解
Aug 16 #Javascript
js 自带的 map() 方法全面了解
Aug 16 #Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 #Javascript
js 自带的sort() 方法全面了解
Aug 16 #Javascript
You might like
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
php制作简单模版引擎
2016/04/07 PHP
实例讲解PHP表单处理
2019/02/15 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
jquery检测上传文件大小示例
2020/04/26 jQuery
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
python 获取文件列表(或是目录例表)
2009/03/25 Python
Python读大数据txt
2016/03/28 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
python 字典 setdefault()和get()方法比较详解
2019/08/07 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
Python爬虫实战案例之爬取喜马拉雅音频数据详解
2020/12/07 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
商务主管岗位职责
2013/12/08 职场文书
项目施工员岗位职责
2014/03/09 职场文书
股份合作协议书范本
2014/04/14 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
激励员工的口号
2014/06/16 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书
HR在给员工开具离职证明时,需要注意哪些问题?
2019/07/03 职场文书
Python的三个重要函数详解
2022/01/18 Python