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 相关文章推荐
解析arp病毒背后利用的Javascript技术附解密方法
Aug 06 Javascript
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
js substring从右边获取指定长度字符串(示例代码)
Dec 23 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
bootstrap是什么_动力节点Java学院整理
Jul 14 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
vue cli构建的项目中请求代理与项目打包问题
Feb 26 Javascript
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
JavaScript语句错误throw、try及catch实例解析
Aug 18 Javascript
原生js 实现表单验证功能
Feb 08 Javascript
js实现自动锁屏功能
Jun 02 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 xml 入门学习资料
2011/01/01 PHP
关于php循环跳出的问题
2013/07/01 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十二)
2014/06/25 PHP
php计算两个整数的最大公约数常用算法小结
2015/03/05 PHP
一段多浏览器的"复制到剪贴板"javascript代码
2007/03/27 Javascript
jquery.validate使用攻略 第二部
2010/07/01 Javascript
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
python 排列组合之itertools
2013/03/20 Python
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
python实现查询苹果手机维修进度
2015/03/16 Python
使用python实现个性化词云的方法
2017/06/16 Python
超简单使用Python换脸实例
2019/03/27 Python
Django 重写用户模型的实现
2019/07/29 Python
Python代码注释规范代码实例解析
2020/08/14 Python
HTML5地理定位实例
2014/10/15 HTML / CSS
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
Python的两道面试题
2013/06/29 面试题
初中高效课堂实施方案
2014/02/26 职场文书
就业协议书怎么填
2014/04/11 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书
单位工作证明
2014/10/07 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
Jsonp劫持学习
2021/04/01 PHP