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网页关闭时提醒效果脚本
Oct 22 Javascript
JavaScript 函数式编程的原理
Oct 16 Javascript
JQuery优缺点分析说明
Jun 09 Javascript
js 金额文本框实现代码
Feb 14 Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
Bootstrap模态对话框的简单使用
Apr 29 Javascript
Angular使用动态加载组件方法实现Dialog的示例
May 11 Javascript
vue插件实现v-model功能
Sep 10 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
JavaScript实现栈结构Stack过程详解
Mar 07 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
用文本作数据处理
2006/10/09 PHP
PHP parse_url 一个好用的函数
2009/10/03 PHP
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
php实现文件预览功能
2017/05/23 PHP
PHP使用观察者模式处理异常信息的方法详解
2019/09/24 PHP
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
2013/05/08 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
微信小程序实现pdf、word等格式文件上传的方法
2019/09/10 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
python 异常处理总结
2016/10/18 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
python requests.post带head和body的实例
2019/01/02 Python
python 字段拆分详解
2019/12/17 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
Python中格式化字符串的四种实现
2020/05/26 Python
opencv+pyQt5实现图片阈值编辑器/寻色块阈值利器
2020/11/13 Python
C#面试常见问题
2013/02/25 面试题
专科毕业生学习生活的自我评价
2013/10/26 职场文书
期中考试反思800字
2014/05/01 职场文书
应届硕士毕业生自荐信
2014/05/26 职场文书
诚信考试标语
2014/06/24 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
满月酒邀请函
2015/01/30 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers