JavaScript寄生组合式继承原理与用法分析


Posted in Javascript onJanuary 11, 2019

本文实例讲述了JavaScript寄生组合式继承。分享给大家供大家参考,具体如下:

寄生组合式继承

寄生组合式继承,就是通过伪造对象来继承属性,通过原型链的混成形式来继承方法。

这种技术的基本思路是:不必为了指定子类型的原型而调用超类型的构造函数,因为我们所需要的只是超类型原型的一个副本而已(这一点正是组合继承的问题,并且正是JavaScript这种原型式语言的强大之处,直接copy对象-原型对象)。本质上,就是使用寄生式继承来继承超类型的原型,然后再将结果指定给子类型的原型。

function inheritPrototype(subType, superType){
  var prototype = Object.create(superType.prototype); //创建超类型原型副本
  prototype.constructor = subType;          //修改原型副本的不同属性
  subType.prototype = prototype;           //指定原型
}
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;
}
//继承方法
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function(){
  console.log(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
console.log(instance1.colors); //"red, blue, green, black"
instance1.sayName();      //"Nicholas"
instance1.sayAge();      //29

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,可得如下运行结果:

JavaScript寄生组合式继承原理与用法分析

这个是寄生组合式继承的最简单形式。这个函数接收两个参数:

1. 子类型构造函数
2. 超类型构造函数

在函数内部,寄生组合式继承最简形式分为3个步骤:

1. 创建超类型原型副本;
2. 为创建的副本指定constructor属性,从而弥补因为重写SubType原型而失去的默认的constructor属性,这个原型副本的constructor属性变化:SuperType ?> SubType;
3. 将该完善好的副本赋值给子类型的原型。

寄生组合式继承的图解如下:

JavaScript寄生组合式继承原理与用法分析

寄生组合式继承的高效率体现在它只调用了一次SuperType构造函数,并且因此避免了在SubType.prototype上面创建不必要的,多余的属性。与此同时,原型链还能保持不变。

更多关于JavaScript相关内容还可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
用javascript做拖动布局的思路
May 31 Javascript
JavaScript写的一个自定义弹出式对话框代码
Jan 17 Javascript
js Array对象的扩展函数代码
Apr 24 Javascript
完美JQuery图片切换效果的简单实现
Jul 21 Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 Javascript
详解angular用$sce服务来过滤HTML标签
Apr 11 Javascript
javascript实现电脑和手机版样式切换
Nov 10 Javascript
Angular脚手架开发的实现步骤
Apr 09 Javascript
javascript异步编程的六种方式总结
May 17 Javascript
基于javascript实现日历功能原理及代码实例
May 07 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 Javascript
浅谈es6中的元编程
Dec 01 Javascript
JavaScript常见继承模式实例小结
Jan 11 #Javascript
JavaScript惰性求值的一种实现方法示例
Jan 11 #Javascript
JavaScript创建对象的四种常用模式实例分析
Jan 11 #Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 #Javascript
VeeValidate 的使用场景以及配置详解
Jan 11 #Javascript
JS函数节流和防抖之间的区分和实现详解
Jan 11 #Javascript
微信公众号H5支付接口调用方法
Jan 10 #Javascript
You might like
全国FM电台频率大全 - 12 安徽省
2020/03/11 无线电
php,不用COM,生成excel文件
2006/10/09 PHP
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
splice slice区别
2006/10/09 Javascript
DHTML 中的绝对定位
2006/11/26 Javascript
jQuery 剧场版 你必须知道的javascript
2009/05/27 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
深入学习jQuery Validate表单验证
2016/01/18 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
python爬取youtube视频的示例代码
2021/03/03 Python
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
菲律宾旅游网站:Expedia菲律宾
2017/10/11 全球购物
Halston Heritage官网:简洁的日装,稍显奢华的晚装
2018/11/20 全球购物
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
英文版网络工程师求职信
2013/10/28 职场文书
美术教师岗位职责
2014/03/18 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
2015年远程教育工作总结
2015/05/20 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript