浅谈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 装载iframe子页面,自适应高度
Mar 20 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
Nov 25 Javascript
Javascript中String的常用方法实例分析
Jun 13 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
Sep 12 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
Sep 18 Javascript
JS实现的邮箱提示补全效果示例
Jan 30 Javascript
详解微信小程序之scroll-view的flex布局问题
Jan 16 Javascript
layui关闭层级、简单监听的实例
Sep 06 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 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
如何对PHP程序中的常见漏洞进行攻击
2006/10/09 PHP
利用PHP和AJAX创建RSS聚合器的代码
2007/03/13 PHP
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
如何使用PHP给图片加水印
2016/10/12 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
跨浏览器的设置innerHTML方法
2006/09/18 Javascript
JavaScript的eval JSON object问题
2009/11/15 Javascript
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
js中less常用的方法小结
2017/08/09 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
Vue 实现简易多行滚动"弹幕"效果
2020/01/02 Javascript
vue缓存之keep-alive的理解和应用详解
2020/11/02 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
python 内置函数filter
2017/06/01 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
感谢信模板大全
2015/01/23 职场文书
先进工作者个人总结
2015/02/15 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
收入证明申请书
2015/06/12 职场文书
Python中json.load()和json.loads()有哪些区别
2021/06/07 Python