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入门教程(6) Window窗口对象
Jan 31 Javascript
jquery 事件执行检测代码
Dec 09 Javascript
jQuery 幻灯片插件(带缩略图功能)
Jan 24 Javascript
range 标准化之获取
Aug 28 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
Nov 25 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
对javascript继承的理解
Oct 11 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 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
isset和empty的区别
2007/01/15 PHP
php正则表达式使用的详细介绍
2013/04/27 PHP
PHP速成大法
2015/01/30 PHP
PHP生成器简单实例
2015/05/13 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
javascript replace方法与正则表达式
2008/02/19 Javascript
JsRender实用入门教程
2014/10/31 Javascript
javascript操作数组详解
2014/12/17 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
自己编写的支持Ajax验证的JS表单验证插件
2015/05/15 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
[56:18]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第二局
2016/03/05 DOTA
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
Python连接Impala实现步骤解析
2020/08/04 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
资深地理教师自我评价
2013/09/21 职场文书
《金钱的魔力》教学反思
2014/02/24 职场文书
乡党政领导班子群众路线教育实践活动个人对照检查材料
2014/09/20 职场文书
Mysql数据库值的添加、修改、删除及清空操作实例
2021/06/20 MySQL
Python socket如何解析HTTP请求内容
2022/02/12 Python
关于EntityWrapper的in用法
2022/03/22 Java/Android