javascript继承 --- 多种继承方式解析(ES5)

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript继承 --- 多种继承方式解析(ES5)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

javascript继承

前言

@H_360_5@javascript作为一门轻量级的脚本语言在ES6和node.js的横空出世之后将其推向的新的高度,虽然 ES6 中出现的新的生成对象的类语法格式,但依然为ES5的语法糖,而我们依然有必要从javascript的原生实现入手来了解它的继承实现方式,ES6给出了更加简洁的固定的类声明方式,有兴趣的可以查看阮一峰的ES6入门,下面给出原文链接

es6 阮一峰http://es6.ruanyifeng.com


javascript的继承不同的开发者有不同的理解方式,笔者认为主要分为四种
 - 原型链继承
 - 对象冒充继承(构造函数继承 不过我不喜欢这个名字)
 - 组合继承
 - 寄生组合继承

对于继承,可以预先声明一个Animal, 进而讨论不同的继承方式.
    let Animal = (function () {
      function Animal (name) {
        this.name = name || 'Animal';
        this.sleep = function(){
          console.LOG(this.name + '正在睡觉!');
        }
      }
      Animal.PRototyPE.eat = function(food) {
        console.log(this.name + '正在:' + food);
      }
      return Animal;
    })()
  1. 原型链继承

        let Cat = (function () {
          function Cat(){ 
          }
          Cat.prototype = new Animal();
          Cat.prototype.name = 'cat';
          return Cat;
        })()
    原型链是 javascript 的典型继承方式, 这种继承方式的最大特点就是共享,所有事例共享原型对象中的所有属性和方法, 共享是它的最大优点 也是它的最大缺点, 正对我们的不同需求, 比如大多数情况下我们常常需要某些属性是子类特有的  而一些读取属性方法需要共享,--另外此种继承无法向父类传参,无法实现多继承
  2. 对象冒充继承

        let Cat = (function () {
          function Cat(name){
            Animal.call(this,name);
          }
          return Cat;
        })()
    对象冒充继承就是简单利用call或者apply方法实现继承,这种继承最大的特点正好与原型链继承相反不能继承原型属性/方法--非共享(子类自有一份), 同样这是它的优点也是它的缺点, 另外它解决了原型链继承中无法向父类传参的缺点, 并且可以实现某种意义上的多继承--(注意这种多继承是打引号的)
  3. 组合继承

        let Cat = (function () {
          function Cat(name){
            Animal.call(this, name);
          }
          Cat.prototype = new Animal();
          Cat.prototype.constructor = Cat;
          return Cat;
        })()
    组合继承是比较好的继承, 他是原型链继承和对象冒充继承的合体, 合理的利用了这两种组合的特点(是特点不是优点^_^),既是子类的实例,也是父类的实例, 但有一个缺点就是调用了两次父类构造函数,生成了两份实例(子类实例将子类原型上的那份屏蔽了)造成内存浪费. 这也是用的最多的一种
  4. 寄生组合继承

        let Cat = (function () {
          function Cat(name){
            Animal.call(this, name);
          }
          (function(sub, sup){
            VAR Super = function(){};
            Super.prototype = sup.prototype;
            sub.prototype = new Super();
            sub.prototype.constructor = sub
          })(Cat, Animal)
          return Cat;
        })()
寄生组合继承是对组合继承的基础上的升华, 个人认为是堪称完美的继承方式,改进的组合继承内存浪费的问题^_^

脚本宝典总结

以上是脚本宝典为你收集整理的javascript继承 --- 多种继承方式解析(ES5)全部内容,希望文章能够帮你解决javascript继承 --- 多种继承方式解析(ES5)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。