JS 面向对象之继承---多种组合继承详解


Posted in Javascript onJuly 10, 2016

这一次要讲 组合、原型式、寄生式、寄生组合式继承方式。

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()。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。

以上这篇JS 面向对象之继承---多种组合继承详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
用javascript替换URL中的参数值示例代码
Jan 27 Javascript
javascript中的this详解
Dec 08 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 Javascript
jquery 实现回车登录详解及实例代码
Oct 23 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
Feb 12 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
nginx配置React静态页面的方法教程
Nov 03 Javascript
js运算符的一些特殊用法
Jul 29 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 #Javascript
JS获取随机数和时间转换的简单实例
Jul 10 #Javascript
JS生成不重复的随机数组的简单实例
Jul 10 #Javascript
浅谈JavaScript对象与继承
Jul 10 #Javascript
Bootstrap框架下下拉框select搜索功能
Mar 26 #Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
Jul 10 #Javascript
深入浅析JavaScript函数前面的加号和叹号
Jul 09 #Javascript
You might like
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
PHP 加密解密内部算法
2010/04/22 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
javascript 树控件 比较好用
2009/06/11 Javascript
js中一维数组和二位数组中的几个问题示例说明
2014/07/17 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
又拍云 Node.js 实现文件上传、删除功能
2018/10/28 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
python实现公司年会抽奖程序
2019/01/22 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
Python 3.10 的首个 PEP 诞生,内置类型 zip() 迎来新特性(推荐)
2020/07/03 Python
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
印度尼西亚综合购物网站:Lazada印尼
2016/09/07 全球购物
公务员职务工作的自我评价
2013/11/01 职场文书
旅行社各个岗位职责
2014/03/15 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
七一活动主持词
2015/06/29 职场文书
2019年最新感恩节祝福语(28句)
2019/11/27 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python
redis数据结构之压缩列表
2022/03/21 Redis