浅谈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焦点的方法小结
Oct 08 Javascript
js DOM模型操作
Dec 28 Javascript
JS与C#编码解码
Dec 03 Javascript
详细解读AngularJS中的表单验证编程
Jun 19 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
微信小程序支付之c#后台实现方法
Oct 19 Javascript
浅谈React前后端同构防止重复渲染
Jan 05 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 Javascript
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
Javascript的promise,async和await的区别详解
Mar 24 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
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
PHP下载远程图片的几种方法总结
2017/04/07 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
javascript[js]获取url参数的代码
2007/10/17 Javascript
学习ExtJS border布局
2009/10/08 Javascript
js 手机号码合法性验证代码集合
2012/09/29 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
Javascript window对象详解
2014/11/12 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
jQuery实现简单的点赞效果
2020/05/29 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
Python随机数random模块使用指南
2016/09/09 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
python不同系统中打开方法
2020/06/23 Python
深入了解NumPy 高级索引
2020/07/24 Python
Python pymsql模块的使用
2020/09/07 Python
美国内衣品牌:Leonisa
2016/08/14 全球购物
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
创业计划书——互联网商机
2014/01/12 职场文书
工程招投标邀请书
2014/01/26 职场文书
医药营销个人求职信范文
2014/02/07 职场文书
介绍信怎么写
2015/01/30 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书