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 相关文章推荐
bcastr2.0 通用的图片浏览器
Nov 22 Javascript
基于jquery的滚动新闻列表
Jun 19 Javascript
parentElement,srcElement的使用小结
Jan 13 Javascript
JavaScript判断浏览器及其版本信息
Jan 20 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
vue项目中axios使用详解
Feb 07 Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
微信开发之微信jssdk录音功能开发示例
Oct 22 Javascript
Node.js API详解之 repl模块用法实例分析
May 25 Javascript
JavaScript文档对象模型DOM
Nov 20 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
PHP+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
PHP读取目录下所有文件的代码
2008/01/07 PHP
php 更新数据库中断的解决方法
2009/06/05 PHP
yii框架中的Url生产问题小结
2012/01/16 PHP
php 文本文件的读取效率
2012/02/10 PHP
PHP判断文章里是否有图片的简单方法
2014/07/26 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
Python数据库的连接实现方法与注意事项
2016/02/27 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
自考生毕业自我鉴定
2013/10/10 职场文书
会计电算化应届生求职信
2013/11/03 职场文书
竞选团支书演讲稿
2014/04/28 职场文书
建筑安全生产目标责任书
2014/07/23 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
个人优缺点总结
2015/02/28 职场文书
golang 语言中错误处理机制
2021/08/30 Golang
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技