浅谈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 相关文章推荐
js比较和逻辑运算符的介绍
Mar 10 Javascript
JavaScript实现将文本框的值插入指定位置的方法
Aug 13 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
Oct 23 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
全面解析Bootstrap表单样式的使用
Sep 09 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
vue 将页面公用的头部组件化的方法
Dec 18 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
JavaScript编写开发动态时钟
Jul 29 Javascript
jquery实现图片放大镜效果
Dec 23 jQuery
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
.htaccess文件保护实例讲解
2011/02/06 PHP
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
jquery 3D球状导航的文章分类
2010/07/06 Javascript
div层的移动及性能优化
2010/11/16 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
2012/02/27 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
React中的render何时执行过程
2018/04/13 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
python中pass语句用法实例分析
2015/04/30 Python
介绍Python中的fabs()方法的使用
2015/05/14 Python
Django框架多表查询实例分析
2018/07/04 Python
numpy.std() 计算矩阵标准差的方法
2018/07/11 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
十一个高级MySql面试题
2014/10/06 面试题
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
机电一体化专业应届生求职信
2013/11/27 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
大学生求职自荐信
2015/03/24 职场文书
2015年毕业生实习评语
2015/03/25 职场文书