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 相关文章推荐
JS控制图片等比例缩放的示例代码
Dec 24 Javascript
js数组操作常用方法
May 08 Javascript
jQuery中:password选择器用法实例
Jan 03 Javascript
超赞的动手创建JavaScript框架的详细教程
Jun 30 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
ES6模块化的import和export用法方法总结
Aug 08 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 Javascript
vue生命周期和react生命周期对比【推荐】
Sep 19 Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 Javascript
vue中的使用token的方法示例
Mar 10 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
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
2012/05/23 Javascript
网页打开自动最大化的js代码
2012/08/22 Javascript
js DOM 元素ID就是全局变量
2012/09/20 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
Python计算程序运行时间的方法
2014/12/13 Python
Python获取系统默认字符编码的方法
2015/06/04 Python
关于Python如何避免循环导入问题详解
2017/09/14 Python
对pandas replace函数的使用方法小结
2018/05/18 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
芬兰灯具网上商店:Nettilamppu.fi
2018/06/30 全球购物
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
党员个人对照检查材料
2014/10/01 职场文书
五一放假通知怎么写
2015/08/18 职场文书
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL
spring boot实现文件上传
2022/08/14 Java/Android