浅谈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 相关文章推荐
JavaScript Event学习第四章 传统的事件注册模型
Feb 07 Javascript
基于JQuery的6个Tab选项卡插件
Sep 03 Javascript
jquery实现瀑布流效果分享
Mar 26 Javascript
js获取鼠标点击的位置实现思路及代码
May 09 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
详解Javascript中的原型OOP
Oct 12 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
Jan 08 Javascript
yarn的使用与升级Node.js的方法详解
Jun 04 Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 Javascript
详解使用create-react-app快速构建React开发环境
May 16 Javascript
JS 实现微信扫一扫功能
Sep 14 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
Jul 20 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
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
Angular4编程之表单响应功能示例
2017/12/13 Javascript
WebSocket的通信过程与实现方法详解
2018/04/29 Javascript
jQuery实现基本动画效果的方法详解
2018/09/06 jQuery
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
js+html实现周岁年龄计算器
2019/06/25 Javascript
微信小程序实现侧边分类栏
2019/10/21 Javascript
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
python一键去抖音视频水印工具
2018/09/14 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
Python xlwt模块使用代码实例
2020/06/10 Python
Python私有属性私有方法应用实例解析
2020/09/15 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
CSS3中的弹性布局em运用入门详解 1em等于多少像素
2021/02/08 HTML / CSS
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
大学校庆邀请函
2014/01/11 职场文书
促销活动总结
2014/04/28 职场文书
新教师培训心得体会
2014/09/02 职场文书
社区服务活动报告
2015/02/05 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android