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 相关文章推荐
JS 拼图游戏 面向对象,注释完整。
Jun 18 Javascript
js中判断控件是否存在
Aug 25 Javascript
jQuery 源码分析笔记(2) 变量列表
May 28 Javascript
JS替换文本域内的回车示例
Feb 18 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
Javascript BOM学习小结(六)
Nov 26 Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 Javascript
javascript每日必学之循环
Feb 19 Javascript
省市二级联动小案例讲解
Jul 24 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
jquery分页优化操作实例分析
Aug 23 jQuery
vue.js实现只能输入数字的输入框
Oct 19 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+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
jquery easyui使用心得
2014/07/07 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
深入浅析Vue全局组件与局部组件的区别
2018/06/15 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
vue打包npm run build时候界面报错的解决
2020/08/13 Javascript
python实现远程通过网络邮件控制计算机重启或关机
2018/02/22 Python
Django框架的使用教程路由请求响应的方法
2018/07/03 Python
对Python之gzip文件读写的方法详解
2019/02/08 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
今天学到的CSS最新技术(与图片背景相关)
2012/12/24 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
北美领先的智能产品购物网站:Wellbots
2018/06/11 全球购物
项目经理聘任书
2014/03/29 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
开工典礼策划方案
2014/05/23 职场文书
2014年教师德育工作总结
2014/11/10 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
写给领导的感谢信
2015/01/22 职场文书
2015中学学校工作总结
2015/07/20 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle