浅谈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 相关文章推荐
用javascript实现计算两个日期的间隔天数
Aug 14 Javascript
Javascript结合css实现网页换肤功能
Nov 02 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
Feb 26 Javascript
JQuery 在线引用及测试引用是否成功
Jun 24 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
vue-cli项目修改文件热重载失效的解决方法
Sep 19 Javascript
vue添加class样式实例讲解
Feb 12 Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 Javascript
原生js实现的移动端可拖动进度条插件功能详解
Aug 15 Javascript
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
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
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
PHP实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
curl和libcurl的区别简介
2015/07/01 PHP
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
js 模拟气泡屏保效果代码
2010/07/10 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
一步步教你用Python实现2048小游戏
2017/01/19 Python
python 随机森林算法及其优化详解
2019/07/11 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
文言文形式的学生求职信
2013/12/03 职场文书
中专生的个人自我评价
2013/12/11 职场文书
应届护士求职信范文
2014/01/26 职场文书
早读课迟到检讨书
2014/09/25 职场文书
2014年接待工作总结
2014/11/26 职场文书
党风廉政建设调研报告
2015/01/01 职场文书
八年级物理教学反思
2016/02/19 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书