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 相关文章推荐
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
javascript异步编程的4种方法
Feb 19 Javascript
Javascript 浮点运算精度问题分析与解决
Mar 26 Javascript
jquery实现相册一下滑动两次的方法
Feb 09 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
Javascript中prototype与__proto__的关系详解
Mar 11 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
Aug 29 Javascript
vue中注册自定义的全局js方法
Nov 15 Javascript
JS array数组检测方式解析
May 19 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
Nov 17 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
PHP4.04简明安装
2006/10/09 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
javascript 闭包
2011/09/15 Javascript
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
jQuery编写QQ简易聊天框
2020/08/27 jQuery
Python 列表list使用介绍
2014/11/30 Python
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
Python字符编码与函数的基本使用方法
2017/09/30 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
python dict 相同key 合并value的实例
2019/01/21 Python
在Python中COM口的调用方法
2019/07/03 Python
python移位运算的实现
2019/07/15 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
Python pickle模块实现对象序列化
2019/11/22 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
NFL加拿大官方网上商店:NHLShop.ca
2019/03/12 全球购物
入团者的自我评价分享
2013/12/02 职场文书
党员培训思想汇报
2014/01/07 职场文书
一年级数学教学反思
2014/02/01 职场文书
2014学雷锋活动总结
2014/03/09 职场文书
学习保证书
2015/01/17 职场文书
北京青年观后感
2015/06/15 职场文书
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫