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 相关文章推荐
学习YUI.Ext 第二天
Mar 10 Javascript
中文路径导致unitpngfix.js不正常的解决方法
Jun 26 Javascript
js 判断上传文件大小及格式代码
Nov 13 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
基于JavaScript实现窗口拖动效果
Jan 18 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
node.js中express中间件body-parser的介绍与用法详解
May 23 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 Javascript
原生JS进行前后端同构
Apr 22 Javascript
微信小程序实现下拉菜单切换效果
Mar 30 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 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函数
2006/12/06 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
提高php运行速度的一些小技巧分享
2012/07/03 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
php curl 上传文件代码实例
2015/04/27 PHP
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
js 日期转换成中文格式的函数
2009/07/07 Javascript
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
解析瀑布流布局:JS+绝对定位的实现
2013/05/08 Javascript
将json当数据库一样操作的javascript lib
2013/10/28 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
详解Vue 非父子组件通信方法(非Vuex)
2017/05/24 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
python利用datetime模块计算时间差
2015/08/04 Python
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
python能做哪方面的工作
2020/06/15 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
如何保障Web服务器安全
2014/05/05 面试题
干部个人对照检查材料
2014/08/25 职场文书
大国崛起日本观后感
2015/06/02 职场文书
推广普通话的宣传语
2015/07/13 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript