实例介绍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 相关文章推荐
javascript数组的使用
Mar 28 Javascript
jquery ajax 调用失败的原因示例介绍
Sep 27 Javascript
移动节点的jquery代码
Jan 13 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
Nov 17 Javascript
理解javascript正则表达式
Mar 08 Javascript
微信小程序 网络API Websocket详解
Nov 09 Javascript
node+express制作爬虫教程
Nov 11 Javascript
提升页面加载速度的插件InstantClick
Sep 12 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
图文讲解vue的v-if使用方法
Feb 11 Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 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
PHP中的正规表达式(二)
2006/10/09 PHP
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
php实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
PHP MVC框架skymvc支持多文件上传
2016/05/26 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
javascript 播放器 控制
2007/01/22 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
2017/08/14 Javascript
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
js的对象与函数详解
2019/01/21 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
使用jQuery实现掷骰子游戏
2019/10/24 jQuery
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
python文件比较示例分享
2014/01/10 Python
详解python中的装饰器
2018/07/10 Python
python3字符串操作总结
2019/07/24 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
python脚本第一行如何写
2020/08/30 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
HelloFresh奥地利:立即订购烹饪盒
2019/02/22 全球购物
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
合伙协议书
2014/04/23 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书