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 AJAX 调用WebService实现代码
Mar 24 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
Jan 28 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
jQuery Dom元素操作技巧
Feb 04 jQuery
javascript性能优化之分时函数的介绍
Mar 28 Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
json数据格式常见操作示例
Jun 13 Javascript
你准备好迎接vue3.0了吗
Apr 28 Javascript
原生js实现照片墙效果
Oct 13 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采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
php中this关键字用法分析
2016/12/07 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
List the Codec Files on a Computer
2007/06/11 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
jQuery中outerWidth()方法用法实例
2015/01/19 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
vue里input根据value改变背景色的实例
2018/09/29 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
js验证密码强度解析
2020/03/18 Javascript
Python中音频处理库pydub的使用教程
2017/06/07 Python
vscode 远程调试python的方法
2017/12/01 Python
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
台湾时尚彩瞳专门店:imeime
2019/08/16 全球购物
给女朋友的道歉信
2014/01/10 职场文书
《美丽的彩虹》教学反思
2014/02/25 职场文书
北京颐和园导游词
2015/01/30 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书