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 相关文章推荐
Expandable "Detail" Table Rows
Aug 29 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
Dec 26 Javascript
Javascript 遮罩层和加载效果代码
Aug 01 Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
分享Javascript实用方法二
Dec 13 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
Sep 26 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
Jul 17 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写的简易聊天室代码
2011/06/04 PHP
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
PHP取整数函数常用的四种方法小结
2012/07/05 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
php实现向javascript传递数组的方法
2015/07/27 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
子窗口、父窗口和Silverlight之间的相互调用
2010/08/16 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
无闪烁更新网页内容JS实现
2013/12/19 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
Node.js的npm包管理器基础使用教程
2016/05/26 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
js实现3d悬浮效果
2017/02/16 Javascript
AngularJS实现根据不同条件显示不同控件
2017/04/20 Javascript
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
axios使用拦截器统一处理所有的http请求的方法
2018/11/02 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
2020/09/12 Javascript
python简单实例训练(21~30)
2017/11/15 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
Python格式化日期时间操作示例
2018/06/28 Python
css3圆角边框和边框阴影示例
2014/05/05 HTML / CSS
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
中专自荐信
2013/10/13 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
购房委托书范本
2014/09/18 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang