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对象链式操作代码(jquery)
Jul 04 Javascript
简略的前端架构心得&&基于editor为例子的编码小技巧
Nov 25 Javascript
javasctipt如何显示几分钟前、几天前等
Apr 30 Javascript
javascript中cookie对象用法实例分析
Jan 30 Javascript
谈谈JavaScript异步函数发展历程
Sep 29 Javascript
JavaScript类型系统之正则表达式
Jan 05 Javascript
微信小程序 canvas API详解及实例代码
Oct 08 Javascript
简单实现js上传文件功能
Aug 21 Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 Javascript
highcharts.js数据绑定方式代码实例
Nov 13 Javascript
Javascript作用域和作用域链原理解析
Mar 03 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
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
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
一个显示天气预报的程序
2006/10/09 PHP
用文本文件制作留言板提示(上)
2006/10/09 PHP
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
php判断一个数组是否为有序的方法
2015/03/27 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
js中关于String对象的replace使用详解
2011/05/24 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
2016/05/15 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
Javascript 实现匿名递归的实例代码
2017/05/25 Javascript
微信小程序带动画弹窗组件使用方法详解
2018/11/27 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
python正常时间和unix时间戳相互转换的方法
2015/04/23 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
静态成员和非静态成员的区别
2012/05/12 面试题
货代行业个人求职简历的自我评价
2013/10/22 职场文书
创业计划书模版
2014/02/05 职场文书
保研推荐信
2014/05/09 职场文书
节能环保口号
2014/06/12 职场文书
2014年法务工作总结
2014/12/11 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
公司车辆管理制度
2015/08/04 职场文书
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers