浅谈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 相关文章推荐
初学prototype,发个JS接受URL参数的代码
Sep 25 Javascript
JavaScript中的闭包原理分析
Mar 08 Javascript
如何在一个页面显示多个百度地图
Apr 07 Javascript
JS和函数式语言的三特性
Mar 05 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
基本DOM节点操作
Jan 17 Javascript
小程序转发探索示例
Feb 19 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
layui 对table中的数据进行转义的实例
Sep 12 Javascript
9种方法优化jQuery代码详解
Feb 04 jQuery
vue实现PC端分辨率适配操作
Aug 03 Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 Javascript
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
ThinkPHP标签制作教程
2014/07/10 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
jQuery MD5加密实现代码
2010/03/15 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
浅谈js的异步执行
2016/10/18 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
Python中的filter()函数的用法
2015/04/27 Python
Python中使用不同编码读写txt文件详解
2015/05/28 Python
Python+matplotlib+numpy实现在不同平面的二维条形图
2018/01/02 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
python同时替换多个字符串方法示例
2019/09/17 Python
Python如何解除一个装饰器
2020/08/07 Python
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
编辑个人求职信范文
2013/09/21 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
团员自我评价范文
2015/03/10 职场文书
如何计划开一家便利店?
2019/07/31 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python