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 相关文章推荐
jquery ajax 同步异步的执行 return值不能取得的解决方案
Jan 08 Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
js和jquery对dom节点的操作(创建/追加)
Apr 21 Javascript
javascript设计模式之工厂模式示例讲解
Mar 04 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
Mar 31 Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
javascript观察者模式实现自动刷新效果
Sep 05 Javascript
微信小程序实现简单表格
Feb 14 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中如何调用webservice的实例参考
2013/04/25 PHP
php实现的日历程序
2015/06/18 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
Yii2 批量插入、更新数据实例
2017/03/15 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
自己的js工具_Form 封装
2009/08/21 Javascript
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
2015/08/24 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
跟老齐学Python之集合的关系
2014/09/24 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
python实现简单点对点(p2p)聊天
2017/09/13 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
详解python Todo清单实战
2018/11/01 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
python getpass模块用法及实例详解
2019/10/07 Python
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
主要的Ajax框架都有什么
2013/11/14 面试题
文明餐桌行动实施方案
2014/02/19 职场文书
保护黄河倡议书
2014/05/16 职场文书
政协会议宣传标语
2014/10/09 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
小学作文之描写天气
2019/08/15 职场文书
Java数组与堆栈相关知识总结
2021/06/29 Java/Android
深入浅析Django MTV模式
2021/09/04 Python