浅谈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兼容性问题汇总
Feb 09 Javascript
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
Aug 28 Javascript
使用GruntJS构建Web程序之构建篇
Jun 04 Javascript
Javascript 字符串模板的简单实现
Feb 13 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 Javascript
jQuery实现立体式数字动态增加(animate方法)
Dec 21 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
解决vue keep-alive 数据更新的问题
Sep 21 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 Javascript
原生js实现文件上传、下载、封装等实例方法
Jan 05 Javascript
JS中==、===你分清楚了吗
Mar 04 Javascript
使用Cargo工具高效创建Rust项目
Aug 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
PHP define函数的使用说明
2008/08/27 PHP
php实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
PHP编程获取各个时间段具体时间的方法
2017/05/26 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
laravel 数据验证规则详解
2019/10/23 PHP
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
复制本贴标题和地址的js代码
2008/07/01 Javascript
纯文字版返回顶端的js代码
2013/08/01 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
Vue.js第二天学习笔记(vue-router)
2016/12/01 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
图文讲解vue的v-if使用方法
2019/02/11 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
[36:19]2018DOTA2亚洲邀请赛 小组赛 A组加赛 Newbee vs LGD
2018/04/03 DOTA
初步解析Python下的多进程编程
2015/04/28 Python
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
python编写分类决策树的代码
2017/12/21 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
喜之郎果冻广告词
2014/03/20 职场文书
活动总结报告范文
2014/05/04 职场文书
公司员工离职证明书
2014/10/04 职场文书
2014年度思想工作总结
2014/11/27 职场文书
公司处罚决定书
2015/06/24 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers