浅谈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 中String.match()与RegExp.exec()的区别说明
Jan 10 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
详解Angular2响应式表单
Jun 14 Javascript
JS实现数组去重方法总结(六种方法)
Jul 14 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
5个你不知道的JavaScript字符串处理库(小结)
Jun 01 Javascript
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
Jun 15 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中批量替换文件名的实现代码
2011/07/20 PHP
通过Email发送PHP错误的方法
2015/07/20 PHP
PHP的自定义模板引擎
2017/03/24 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
javascript parseInt 大改造
2009/09/27 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
2011/03/28 Javascript
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
ES6的异步终极解决方案分享
2019/07/11 Javascript
JavaScript自定义超时API代码实例
2020/04/30 Javascript
[01:03:03]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python内置数据类型详解
2014/08/18 Python
Python实现的txt文件去重功能示例
2018/07/07 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
python与mysql数据库交互的实现
2020/01/06 Python
土木工程专业个人求职信
2013/12/30 职场文书
初三学习计划书范文
2014/04/30 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
机电专业求职信
2014/06/14 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
廉政承诺书范文
2015/04/28 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书
2019财务转正述职报告
2019/06/27 职场文书
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS