浅谈JS继承_寄生式继承 & 寄生组合式继承


Posted in Javascript onAugust 16, 2016

5.寄生式继承

与寄生构造函数和工厂模式类似,创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后返回对象。

function createAnother(original){
 var clone = Object.create(original); //通过调用函数创建一个新对象
 clone.sayHi = function(){    //以某种方式来增强这个对象
  alert("Hi");
 };
 
 return clone;      //返回这个对象
}

var person = {
 name: "Bob",
 friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi();

在上述例子中,createAnother函数接收了一个参数,也就是将要作为新对象基础的对象。

anotherPerson是基于person创建的一个新对象,新对象不仅具有person的所有属性和方法,还有自己的sayHi()方法。

6.寄生组合式继承

组合继承是js最常用的继承模式,组合继承最大的问题就是无论在什么情况下,都会调用两次构造函数:一次是在创建子类型原型时,另一次是在子类型构造函数内部。

function SuperType(name){
 this.name = name;
 this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
 alert(this.name);
}

function SubType(name, age){
 SuperType.call(this, name);//第二次调用SuperType()
 
 this.age = age;
}
SubType.prototype = new SuperType();
//第一次调用SuperType()
SubType.prototype.sayAge = function(){
 alert(this.age);
}

浅谈JS继承_寄生式继承 & 寄生组合式继承

浅谈JS继承_寄生式继承 & 寄生组合式继承

在第一次调用SuperType构造函数时,SubType.prototype会得到两个属性: name和colors; 他们都是SuperType的实例属性,只不过现在位于SubType的原型中。

当调用SubType构造函数时,又会调用一次SuperType构造函数,这一次又在新对象上创建了实例属性name和colors。

于是这两个属性就屏蔽了原型中的两个同名属性。

寄生组合式继承就是为了解决这一问题。

通过借用构造函数来继承属性;

通过原型链来继承方法。

不必为了指定子类型的原型而调用超类型的构造函数,

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(){
 alert(this.name);
}

function SubType(name, age){
 SuperType.call(this, name);//第二次调用SuperType()
 
 this.age = age;
}
inheritPrototype(SubType, SuperType)
SubType.prototype.sayAge = function(){
 alert(this.age);
}

var instance = new SubType("Bob", 18);
instance.sayName();
instance.sayAge();

inheritPrototype函数接收两个参数:子类型构造函数和超类型构造函数。

1. 创建超类型原型的副本。

2. 为创建的副本添加constructor属性,弥补因重写原型而失去的默认的constructor属性

3. 将新创建的对象(即副本)赋值给子类型的原型这种方法只调用了一次SuperType构造函数,instanceof 和isPrototypeOf()也能正常使用。

以上这篇浅谈JS继承_寄生式继承 & 寄生组合式继承就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 Javascript
在jquery中combobox多选的不兼容问题总结
Dec 24 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
May 21 Javascript
Jquery技巧(必须掌握)
Mar 16 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
Nov 09 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
Jul 19 Javascript
Vue 重置组件到初始状态的方法示例
Oct 10 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 Javascript
浅谈JavaScript中this的指向问题
Jul 28 Javascript
Postman无法正常返回结果问题解决
Aug 28 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
jQuery EasyUI Tab 选项卡问题小结
Aug 16 #Javascript
jQuery3.0中的buildFragment私有函数详解
Aug 16 #Javascript
js 自带的 map() 方法全面了解
Aug 16 #Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 #Javascript
js 自带的sort() 方法全面了解
Aug 16 #Javascript
JavaScript实战之菜单特效
Aug 16 #Javascript
深入理解js generator数据类型
Aug 16 #Javascript
You might like
phpMyAdmin下载、安装和使用入门教程
2007/05/31 PHP
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
PHP随机数 C扩展随机数
2016/05/04 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
2020/04/27 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python中私有函数调用方法解密
2016/04/29 Python
python之mock模块基本使用方法详解
2019/06/27 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
python对文件的操作方法汇总
2020/02/28 Python
Python爬虫抓取指定网页图片代码实例
2020/07/24 Python
python使用re模块爬取豆瓣Top250电影
2020/10/20 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
商务英语专业应届毕业生求职信
2013/10/28 职场文书
学校经典推荐信
2013/10/30 职场文书
大学本科生的个人自我评价
2013/12/09 职场文书
采购内勤岗位职责
2013/12/10 职场文书
小组合作学习反思
2014/02/18 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
班级学习计划书
2014/04/27 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
基于Python实现将列表数据生成折线图
2022/03/23 Python
CSS中理解层叠性及权重如何分配
2022/12/24 HTML / CSS