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 相关文章推荐
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
浅析IE10兼容性问题(frameset的cols属性)
Jan 03 Javascript
jquery获取tagName再进行判断
May 29 Javascript
js实现的标题栏新消息闪烁提示效果
Jun 06 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
Javascript动画效果(2)
Oct 11 Javascript
JavaScript排序算法动画演示效果的实现方法
Oct 18 Javascript
浅谈React + Webpack 构建打包优化
Jan 23 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 Javascript
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
原生JS实现音乐播放器
Jan 26 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
PHP采集相关教程之一 CURL函数库
2010/02/15 PHP
基于php实现长连接的方法与注意事项的问题
2013/05/10 PHP
Yii操作数据库的3种方法
2014/03/11 PHP
高性能PHP框架Symfony2经典入门教程
2014/07/08 PHP
JS 继承实例分析
2008/11/04 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
javascript变量提升和闭包理解
2018/03/12 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
原生JS检测CSS3动画是否结束的方法详解
2019/01/27 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
webpack常用构建优化策略小结
2019/11/21 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
Ubuntu下安装PyV8
2016/03/13 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
解决导入django_filters不成功问题No module named 'django_filter'
2020/07/15 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
怎样客观的做好自我评价
2013/12/28 职场文书
家长评语大全
2014/01/22 职场文书
宣传策划类求职信范文
2014/01/31 职场文书
大队委竞选演讲稿
2014/04/28 职场文书
拉贝日记观后感
2015/06/05 职场文书
公司管理制度范本
2015/08/03 职场文书
Oracle笔记
2021/04/05 Oracle
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android