浅谈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 相关文章推荐
jquery select(列表)的操作(取值/赋值)
Aug 06 Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
jQuery中children()方法用法实例
Jan 07 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
Mar 10 Javascript
JavaScript实现分页效果
Mar 28 Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
微信小程序项目实践之主页tab选项实现
Jul 18 Javascript
js实现导航跟随效果
Nov 17 Javascript
Vue从TodoList中学父子组件通信
Feb 05 Javascript
express框架下使用session的方法
Jul 31 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
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
PHP连接SQLServer2005 的问题解决方法
2010/07/19 PHP
利用PHP实现短域名互转
2013/07/05 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
使用Angular CLI生成路由的方法
2018/03/24 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
Vue-cli3多页面配置详解
2020/03/22 Javascript
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
python pygame实现五子棋小游戏
2020/10/26 Python
python实现微信自动回复机器人功能
2019/07/11 Python
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
Square Off美国/加拿大:世界上最聪明的国际象棋棋盘
2018/12/06 全球购物
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
行政部总经理岗位职责
2014/01/04 职场文书
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
餐饮采购员岗位职责
2014/03/15 职场文书
施工员岗位职责
2014/03/16 职场文书
基层党组织公开承诺书
2014/03/28 职场文书
公司运动会策划方案
2014/05/25 职场文书
网络工程专业大学生求职信
2014/10/01 职场文书
2015元旦节寄语
2014/12/08 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
英语导游词
2015/02/13 职场文书
企业办公室主任岗位职责
2015/04/01 职场文书
大学入学感言
2015/08/01 职场文书
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python