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 相关文章推荐
jquery 锁定弹出层实现代码
Feb 23 Javascript
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
jquery实现excel导出的方法
Apr 04 Javascript
jquery实现弹出窗口效果的实例代码
Nov 28 Javascript
js身份证判断方法支持15位和18位
Mar 18 Javascript
JavaScript避免代码的重复执行经验技巧分享
Apr 17 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
Feb 23 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
Jul 31 Javascript
vue车牌号校验和银行校验实战
Jan 23 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
Oct 09 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去掉json字符串中的反斜杠\及去掉双引号前的反斜杠
2015/09/30 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
js Html结构转字符串形式显示代码
2011/11/15 Javascript
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
jquery插件之文字间歇自动向上滚动效果代码
2016/02/25 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
2016/03/01 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
fetch 使用及如何接收JS传值
2017/11/11 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
JavaScript判断数组类型的方法
2019/10/23 Javascript
JS闭包原理及其使用场景解析
2020/12/03 Javascript
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
Python之用户输入的实例
2018/06/22 Python
Python2实现的图片文本识别功能详解
2018/07/11 Python
python 判断文件还是文件夹的简单实例
2019/06/10 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
基于python模拟bfs和dfs代码实例
2020/11/19 Python
python 如何停止一个死循环的线程
2020/11/24 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
JAVA招聘远程笔试题
2015/07/23 面试题
个人授权委托书范本格式
2014/10/12 职场文书
先进党支部申报材料
2014/12/24 职场文书
优秀团队申报材料
2014/12/26 职场文书
教师廉洁自律个人总结
2015/02/10 职场文书
七年级作文之秋游
2019/10/21 职场文书
PHP中->和=>的意思
2021/03/31 PHP
Go timer如何调度
2021/06/09 Golang
bat批处理之字符串操作的实现
2022/03/16 Python
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers