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 字符 Escape,encodeURI,encodeURIComponent
Jul 09 Javascript
Jquery异步请求数据实例代码
Dec 28 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
JavaScript数组去重的多种方法(四种)
Sep 19 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 Javascript
基于vue-cli3和element实现登陆页面
Nov 13 Javascript
js实现点赞按钮功能的实例代码
Mar 06 Javascript
用js编写留言板
Mar 17 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 Javascript
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
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/10/09 PHP
PHP4实际应用经验篇(6)
2006/10/09 PHP
php在线生成ico文件的代码
2007/10/09 PHP
PHP 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
php汉字转拼音的示例
2014/02/27 PHP
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
jQuery数据类型小结(14个)
2016/01/08 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
2019/07/10 jQuery
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
Python从MP3文件获取id3的方法
2015/06/15 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
pandas的排序和排名的具体使用
2019/07/31 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
Python进行统计建模
2020/08/10 Python
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
阿根廷旅游网站:almundo阿根廷
2018/02/12 全球购物
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
2019年分享net面试的经历和题目
2016/08/07 面试题
工程技术员岗位职责
2014/03/02 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书