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 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
Mar 10 Javascript
flash javascript之间的通讯方法小结
Dec 20 Javascript
document.all的一个比较完整的总结及案例
Jan 31 Javascript
Javascript中封装window.open解决不兼容问题
Sep 28 Javascript
纯JavaScript代码实现移动设备绘图解锁
Oct 16 Javascript
js中获取jsp表单中radio类型的值简单实例
Aug 15 Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
JS用最简单的方法实现四舍五入
Aug 27 Javascript
微信小程序页面调用自定义组件内的事件详解
Sep 12 Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 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/27 PHP
javascript window对象属性整理
2009/10/24 Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
jQuery实现获取绑定自定义事件元素的方法
2015/12/02 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
深入浅析Node.js单线程模型
2017/07/10 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
angular 服务随记小结
2019/05/06 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
python传到前端的数据,双引号被转义的问题
2020/04/03 Python
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
2019/09/26 HTML / CSS
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
合同专员岗位职责
2013/12/18 职场文书
办公室主任竞聘演讲稿
2014/05/15 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
同意报考公务员证明
2015/06/17 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书
从QQtabBar看css命名规范BEM的详细介绍
2021/08/07 HTML / CSS
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技