浅谈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 相关文章推荐
Prototype使用指南之range.js
Jan 10 Javascript
JQuery 获取和设置Select选项的代码
Feb 07 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
Jun 25 Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 Javascript
jQuery上传多张图片带进度条样式(DEMO)
Mar 02 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
微信小程序利用canvas 绘制幸运大转盘功能
Jul 06 Javascript
小程序实现多列选择器
Feb 15 Javascript
利用Node.js如何实现文件循环覆写
Apr 05 Javascript
深入学习JavaScript 高阶函数
Jun 11 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 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使用Session遇到的一个Permission denied Notice解决办法
2014/07/30 PHP
PHP学习笔记(一) 简单了解PHP
2014/08/04 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
一个选择最快的服务器转向代码
2009/04/27 Javascript
jQuery Tools tooltip使用说明
2012/07/14 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
JS事件在IE与FF中的区别详细解析
2013/11/20 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
javascript实现获取图片大小及图片等比缩放的方法
2016/11/24 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
JS基于for语句编写的九九乘法表示例
2018/01/04 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
python定时器使用示例分享
2014/02/16 Python
使用python实现扫描端口示例
2014/03/29 Python
python入门基础之用户输入与模块初认识
2016/11/14 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
Python通过format函数格式化显示值
2020/10/17 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
夏威夷咖啡公司:Hawaii Coffee Company
2019/09/19 全球购物
酒吧总经理岗位职责
2013/12/10 职场文书
大众服装店创业计划书范文
2014/01/01 职场文书
决定成败的关键——创业计划书
2014/01/24 职场文书
2014年转正工作总结
2014/11/08 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
2015年大学生工作总结
2015/04/21 职场文书
小学班级管理心得体会
2016/01/07 职场文书