实例介绍JavaScript中多种组合继承


Posted in Javascript onJanuary 20, 2019

1. 组合继承:又叫伪经典继承,是指将原型链和借用构造函数技术组合在一块的一种继承方式。

下面来看一个例子:

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);

  this.age = age;

 }

 

 //继承方法

 SubType.prototype = new SuperType();

 SubType.prototype.sayAge = function() {

  alert(this.age);

 }

 

 var instance1 = new SubType("Nicholas", 29);

 instance1.colors.push("black");

 alert(instance1.colors); //red,blue,green,black

 instance1.sayName(); //Nicholas

 instance1.sayAge(); //29

 

 var instance2 = new SubType("Greg", 27);

 alert(instance2.colors); //red,blue,green

 instance2.sayName(); //Greg

 instance2.sayAge(); //27

组合继承避免了原型链和借用构造函数的缺陷,融合它们的优点。

2. 原型式继承

可以在不必预先定义构造函数的情况下实现继承,其本质是执行对给定对象的浅复制。而复制得到的副本还可以得到进一步的改造。

function object(o) {

  function F(){};

  F.prototype = o;

  return new F;

 }

 

 var person = {

  name: "Nicholas",

  friends: ["Shelby", "Court", "Van"]

 };

 

 var antherPerson = object(person);

 antherPerson.name = "Greg";

 antherPerson.friends.push("Rob");

 

 var antherPerson = object(person);

 antherPerson.name = "Linda";

 antherPerson.friends.push("Barbie");

 

 alert(person.friends); //Shelby,Court,Van,Rob,Barbie

3. 寄生式继承

与原型式继承非常相似,也是基于某个对象或某些信息创建一个对象,然后增强对象,最后返回对象。为了解决组合继承模式由于多次调用超类型构造函数而导致的低效率问题,可以将这个模式与组合继承一起使用。

function object(o) {

  function F(){};

  F.prototype = o;

  return new F;

 }

 function createAnother(original) {

  var clone = object(original);

  clone.sayHi = function() {

   alert("Hi");

  };

  return clone;

 }

 

 var person = {

  name: "Nicholas",

  friends: ["Shelby", "Court", "Van"]

 };

 

 var anotherPerson = createAnother(person);

 anotherPerson.sayHi();

4. 寄生组合式继承

集寄生式继承和组合继承的优点与一身,是实现基本类型继承的最有效方式。

//继承原型

 function extend(subType, superType) {

  function F(){};

  F.prototype = superType.prototype;

 

  var prototype = new F;

  prototype.constructor = subType;

  subType.prototype = prototype;

 }

 

 //超类方法

 function SuperType(name) {

  this.name = name;

  this.colors = ["red", "blue", "green"];

 }

 SuperType.prototype.sayName = function() {

  return this.name;

 }

 

 //子类方法

 function SubType(name, age) {

  SuperType.call(this, name);

  this.age = age;

 }

 

 //继承超类的原型

 extend(SubType, SuperType);

 

 //子类方法

 SubType.prototype.sayAge = function() {

  return this.age;

 }

 

 var instance1 = new SubType("Shelby");

 var instance2 = new SubType("Court", 28);

 

 instance1.colors.push('black');

 

 alert(instance1.colors); //red,blue,green,black

 alert(instance2.colors); //red,blue,green

 

 alert(instance1 instanceof SubType); //true

 alert(instance1 instanceof SuperType); //true

这段例子的高效率体现在它只调用了一次SuperType构造函数,并且因此避免了在SubType.prototype上面创建不必要的多余的属性。与此同时,原型链还能保持不变。因此,还能正常使用instanceof 和 isPrototypeOf()。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。

Javascript 相关文章推荐
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
Dec 02 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
Aug 12 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
JavaScript省市区三级联动菜单效果
Sep 21 Javascript
JS如何生成一个不重复的ID的函数
Dec 25 Javascript
微信小程序 tabs选项卡效果的实现
Jan 05 Javascript
利用Node.js对文件进行重命名
Mar 12 Javascript
AngularJS 仿微信图片手势缩放的实例
Sep 28 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
微信小程序的引导页实现代码
Jun 24 Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 #Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 #Javascript
Django+vue跨域问题解决的详细步骤
Jan 20 #Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 #Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 #Javascript
JavaScript中concat复制数组方法浅析
Jan 20 #Javascript
JavaScript中import用法总结
Jan 20 #Javascript
You might like
杏林同学录(八)
2006/10/09 PHP
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
js控制的遮罩层实例介绍
2013/05/29 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
jQuery EasyUI Pagination实现分页的常用方法
2016/05/21 Javascript
JavaScript实现实时更新系统时间的实例代码
2017/04/04 Javascript
详解Vue 非父子组件通信方法(非Vuex)
2017/05/24 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
[56:01]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 Effect vs EG
2018/03/31 DOTA
Python FTP操作类代码分享
2014/05/13 Python
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
如何使用python进行pdf文件分割
2019/11/11 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
农村葬礼主持词
2014/03/31 职场文书
大学生学习计划书
2014/09/15 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
2014年计划生育协会工作总结
2014/11/14 职场文书
党员进社区活动总结
2015/05/07 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
硕士学位申请报告
2015/05/15 职场文书
初中英语教学反思范文
2016/02/15 职场文书