浅谈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 面向对象(一)(共有方法,私有方法,特权方法)
May 23 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
AngularJS 作用域详解及示例代码
Aug 17 Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 Javascript
js oncontextmenu事件使用详解
Mar 25 Javascript
JS排序之快速排序详解
Apr 08 Javascript
Vue起步(无cli)的啊教程详解
Apr 11 Javascript
elementUI 动态生成几行几列的方法示例
Jul 11 Javascript
原生JS实现贪吃蛇小游戏
Mar 09 Javascript
vue在线动态切换主题色方案
Mar 26 Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 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
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
php验证手机号码
2015/11/11 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
Python中的日期时间处理详解
2016/11/17 Python
python实现12306抢票及自动邮件发送提醒付款功能
2018/03/08 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
python读取Kafka实例
2019/12/23 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
详解python UDP 编程
2020/08/24 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
雪山饭庄的创业计划书范文
2014/01/18 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
起诉状范本
2015/05/20 职场文书
PyTorch的Debug指南
2021/05/07 Python
总结高并发下Nginx性能如何优化
2021/11/01 Servers
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL