浅谈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 相关文章推荐
js加入收藏夹代码(兼容ie/ff/op)
May 16 Javascript
JavaScript中扩展Array contains方法实例
Aug 23 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
js实现碰撞检测特效代码分享
Oct 16 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
javascript表达式和运算符详解
Feb 07 Javascript
JavaScript Uploadify文件上传实例
Feb 28 Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 Javascript
ES6顶层对象、global对象实例分析
Jun 14 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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
php汉字转拼音的示例
2014/02/27 PHP
PHP数组相关函数汇总
2015/03/24 PHP
PHP7常量数组用法分析
2016/09/26 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
tp5递归 无限级分类详解
2019/10/18 PHP
javascript测试题练习代码
2012/10/10 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
2016/06/02 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
python修改注册表终止360进程实例
2014/10/13 Python
Python中的__SLOTS__属性使用示例
2015/02/18 Python
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
Python多线程原理与用法详解
2018/08/20 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
python爬虫泛滥的解决方法详解
2020/11/25 Python
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
专门出售各种儿童读物的网站:Put Me In The Story
2016/08/07 全球购物
一些Unix笔试题和面试题
2013/01/22 面试题
中学教师请假制度
2014/02/03 职场文书
合作协议书
2014/04/23 职场文书
住宅质量保证书
2014/04/29 职场文书
小学校长个人总结
2015/03/03 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
python绘制箱型图
2021/04/27 Python
Ajax实现三级联动效果
2021/10/05 Javascript
Python实现照片卡通化
2021/12/06 Python