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 继承机制的实现
Aug 12 Javascript
jquery 与NVelocity 产生冲突的解决方法
Jun 13 Javascript
js判断url是否有效的两种方法
Mar 04 Javascript
IE8中动态创建script标签onload无效的解决方法
Dec 22 Javascript
jQuery获取及设置表单input各种类型值的方法小结
May 24 Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 Javascript
JS原生带缩略图的图片切换效果
Oct 10 Javascript
jquery实现动态改变css样式的方法分析
May 27 jQuery
node实现mock-plugin中间件的方法
Dec 25 Javascript
微信小程序学习总结(五)常见问题实例小结
Jun 04 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字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
PHP的mysqli_thread_id()函数讲解
2019/01/24 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
jQuery 树形结构的选择器
2010/02/15 Javascript
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
Javascript 页面模板化很多人没有使用过的方法
2012/06/05 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
2013/04/28 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
Move.js入门
2017/02/08 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
vue webpack重写cookie路径的方法
2019/07/10 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
基于Vue中使用节流Lodash throttle详解
2019/10/30 Javascript
node后端服务保活的实现
2019/11/10 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
TensorFlow实现自定义Op方式
2020/02/04 Python
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
成人大专自我鉴定范文
2013/10/19 职场文书
校园新闻广播稿
2014/01/10 职场文书
部队万能检讨书
2014/02/20 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
新生儿未入户证明
2015/06/23 职场文书
php中pcntl_fork详解
2021/04/01 PHP
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS