浅谈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 相关文章推荐
jquery实现table鼠标经过变色代码
Sep 25 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
Mar 31 Javascript
继续学习javascript闭包
Dec 03 Javascript
javascript self对象使用详解
Oct 18 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 Javascript
Node.js使用Koa搭建 基础项目
Jan 08 Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 Javascript
node.js使用express框架进行文件上传详解
Mar 03 Javascript
VUE实现移动端列表筛选功能
Aug 23 Javascript
如何解决vue在ios微信"复制链接"功能问题
Mar 26 Javascript
react+antd 递归实现树状目录操作
Nov 02 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
用文本文件制作留言板提示(下)
2006/10/09 PHP
php增删改查示例自己写的demo
2013/09/04 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
php 获取文件行数的方法总结
2016/10/11 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
JavaScript解析URL参数示例代码
2013/08/12 Javascript
JavaScript中双叹号(!!)作用示例介绍
2014/04/10 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
js实现图片推拉门效果代码实例
2019/05/18 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
python sort、sorted高级排序技巧
2014/11/21 Python
优化Python代码使其加快作用域内的查找
2015/03/30 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
详解python配置虚拟环境
2019/04/08 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
Python使用jupyter notebook查看ipynb文件过程解析
2020/06/02 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
css3中transition属性详解
2014/09/02 HTML / CSS
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
园长自我鉴定
2013/10/06 职场文书
测绘工程本科生求职信
2013/10/10 职场文书
校园联欢晚会主持词
2014/03/17 职场文书
学生评语大全
2014/04/18 职场文书
商务助理求职信范文
2014/04/20 职场文书
励志演讲稿200字
2014/08/21 职场文书
新闻通讯稿范文
2015/07/22 职场文书
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android