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 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
懒就要懒到底——鼠标自动点击(含时间判断)
Feb 20 Javascript
Javascript var变量隐式声明方法
Oct 19 Javascript
Jquery下判断Id是否存在的代码
Jan 06 Javascript
jquery插件制作简单示例说明
Feb 03 Javascript
javascript实现模拟时钟的方法
May 13 Javascript
javascript中CheckBox全选终极方案
May 20 Javascript
基于原生js运动方式关键点的总结(推荐)
Oct 01 Javascript
React Router v4 入坑指南(小结)
Apr 08 Javascript
vue.js实现标签页切换效果
Jun 07 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
axios+Vue实现上传文件显示进度功能
Apr 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实现的功能是显示8条基色色带
2006/10/09 PHP
浅析PHP中Collection 类的设计
2013/06/21 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
在线编辑器的实现原理(兼容IE和FireFox)
2007/03/09 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
vue  elementUI 表单嵌套验证的实例代码
2019/11/06 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
Python程序员开发中常犯的10个错误
2014/07/07 Python
python导入时小括号大作用
2017/01/10 Python
python实现随机森林random forest的原理及方法
2017/12/21 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
DataList 能否分页,请问如何实现?
2015/05/03 面试题
应用化学专业职业生涯规划书
2014/01/22 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
蛋糕店创业计划书
2014/05/06 职场文书
优秀毕业生自荐信
2014/06/10 职场文书
励志演讲稿300字
2014/08/21 职场文书
房屋租房协议书范本
2014/12/04 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL