浅谈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实现form表单reset按钮重置清空表单功能
Dec 18 Javascript
JQuery中属性过滤选择器用法实例分析
May 18 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
Feb 15 Javascript
js轮播图的插件化封装详解
Jul 17 Javascript
opencv 识别微信登录验证滑动块位置
Aug 07 Javascript
layui问题之模拟select点击事件的实例讲解
Aug 15 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
Nov 01 Javascript
vue+ts下对axios的封装实现
Feb 18 Javascript
JavaScript交换变量常用4种方法解析
Sep 02 Javascript
JavaScript实现栈结构详细过程
Dec 06 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
smarty中先strip_tags过滤html标签后truncate截取文章运用
2010/10/25 PHP
三种php连接access数据库方法
2013/11/11 PHP
php中smarty实现多模版网站的方法
2015/06/11 PHP
window.location.hash 使用说明
2010/11/08 Javascript
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
js获取url中"?"后面的字串方法
2014/05/15 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
2014/08/22 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
vue子路由跳转实现tab选项卡
2019/07/24 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
Python实现周期性抓取网页内容的方法
2015/11/04 Python
Python实现遍历目录的方法【测试可用】
2017/03/22 Python
scrapy爬虫完整实例
2018/01/25 Python
python列表使用实现名字管理系统
2019/01/30 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
Python运行DLL文件的方法
2020/01/17 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
pycharm快捷键汇总
2020/02/14 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
HTML5实现预览本地图片
2016/02/17 HTML / CSS
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
简历中个人求职的自我评价模板
2013/11/29 职场文书
三方股东合作协议书
2014/10/28 职场文书
2015年关爱留守儿童工作总结
2015/05/22 职场文书
Python数据类型最全知识总结
2021/05/31 Python
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android