浅谈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网络游戏-(模拟城市webgame)提供的一些例子下载
Oct 14 Javascript
JS实现商品倒计时实现代码
May 03 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
Mar 04 Javascript
微信小程序 条件渲染详解
Oct 09 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
elementUI中Table表格问题的解决方法
Dec 04 Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
Jun 17 Javascript
uploadify插件实现多个图片上传并预览
Sep 30 Javascript
关于vue 项目中浏览器跨域的配置问题
Nov 10 Javascript
使用refresh_token实现无感刷新页面
Apr 26 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 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
推荐十款免费 WordPress 插件
2015/03/24 PHP
ThinkPHP控制器详解
2015/07/27 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
PHP防止sql注入小技巧之sql预处理原理与实现方法分析
2019/12/13 PHP
js word表格动态添加代码
2010/06/07 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
Javascript 按位与运算符 (&)使用介绍
2014/02/04 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
javascript中this关键字详解
2016/12/12 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
vue双向绑定及观察者模式详解
2019/03/19 Javascript
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
用python实现的去除win下文本文件头部BOM的代码
2013/02/10 Python
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
python分析nignx访问日志脚本分享
2015/02/26 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
python查看列的唯一值方法
2018/07/17 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
谈一谈基于python的面向对象编程基础
2019/05/21 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
总经理驾驶员岗位职责
2013/12/04 职场文书
五一家具促销方案
2014/01/10 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
一文搞懂Java中的注解和反射
2022/06/21 Java/Android