js常用的继承--组合式继承


Posted in Javascript onMarch 06, 2017

组合继承有时候也叫伪经典继承,指的是将原型链和借用构造函数技术组合到一块,从而发挥二者之长的一种继承模式,其背后的思路是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样既通过在原型上定义方法实现了函数复用,又能保证每个实例都有它的自己的属性。

function SuperType(name){
  this.name=name;
  this.colors=["red","blue","green"];
 }
 SuperType.prototype.sayName=function(){
  console.log(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(){
  console.log(this.age);
 }
 var instance1=new SubType("zxf",24);
 instance1.colors.push("black");
 console.log(instance1.colors);//["red","blue","green","black"]
 instance1.sayName();//"zxf"
 instance1.sayAge();//24
 var instance2=new SubType("jay",36);
 console.log(instance2.colors);//["red","blue","green"]
 instance2.sayName();//"jay"
 instance2.sayAge();//36

在这个例子中,supertype构造函数定义了两个属性,name和colors。supertype的原型定义了一个方法sayname()。subtype构造函数调用supertype时传入了name参数,紧接着又定义了它自己的属性age。然后将supertype的实例赋值给subtype的原型,然后又在该新原型上定义了方法sayage()。这样一来,就可以让两个不同的subtype实例既可以拥有属性--包括colors属性,又可以使用相同的方法。

组合式继承缺点是:调用了两次supertype构造函数,一次在赋值subtype的原型时,一次在实例化子类时call调用,这次调用会屏蔽原型中的两个同名属性。

参考书籍:Javascript高级程序设计(第3版);

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
面向对象Javascript核心支持代码分享
May 23 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
Jul 04 Javascript
Javascript的表单验证-初识正则表达式
Mar 18 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
微信小程序 loading 详解及实例代码
Nov 09 Javascript
js实现扫雷小程序的示例代码
Sep 27 Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 Javascript
vue自定义表单生成器form-create使用详解
Jul 19 Javascript
python实现迭代法求方程组的根过程解析
Nov 25 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 Javascript
vue video和vue-video-player实现视频铺满教程
Oct 30 Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 #Javascript
canvas仿iwatch时钟效果
Mar 06 #Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 #Javascript
纯JS实现弹性导航条效果
Mar 06 #Javascript
JS实现颜色动态淡化效果
Mar 06 #Javascript
vue模板语法-插值详解
Mar 06 #Javascript
js中的面向对象入门
Mar 06 #Javascript
You might like
PHP 常见郁闷问题答解
2006/11/25 PHP
用php获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
跟我学习javascript的this关键字
2020/05/28 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
python文件操作整理汇总
2014/10/21 Python
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
python实现逻辑回归的方法示例
2017/05/02 Python
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
python3实现随机数
2018/06/25 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
Django 权限管理(permissions)与用户组(group)详解
2020/11/30 Python
小学教师的自我评价范例
2013/10/31 职场文书
保险公司年会主持词
2014/03/22 职场文书
竞选大队干部演讲稿
2014/09/11 职场文书
2015年小学数学教研组工作总结
2015/05/21 职场文书
复兴之路观后感
2015/06/02 职场文书
车辆挂靠协议书
2016/03/23 职场文书
配置nginx 重定向到系统维护页面
2021/06/08 Servers
Vue全局事件总线你了解吗
2022/02/24 Vue.js