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

yankeys 发布于2019-08-26 11:35 / 2269人阅读

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

javascript继承 前言

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

原型链继承

    let Cat = (function () {
      function Cat(){ 
      }
      Cat.prototype = new Animal();
      Cat.prototype.name = "cat";
      return Cat;
    })()

原型链是 javascript 的典型继承方式, 这种继承方式的最大特点就是共享,所有事例共享原型对象中的所有属性和方法, 共享是它的最大优点 也是它的最大缺点, 正对我们的不同需求, 比如大多数情况下我们常常需要某些属性是子类特有的  而一些读取属性方法需要共享,--另外此种继承无法向父类传参,无法实现多继承

对象冒充继承

    let Cat = (function () {
      function Cat(name){
        Animal.call(this,name);
      }
      return Cat;
    })()

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

组合继承

    let Cat = (function () {
      function Cat(name){
        Animal.call(this, name);
      }
      Cat.prototype = new Animal();
      Cat.prototype.constructor = Cat;
      return Cat;
    })()

组合继承是比较好的继承, 他是原型链继承和对象冒充继承的合体, 合理的利用了这两种组合的特点(是特点不是优点^_^),既是子类的实例，也是父类的实例, 但有一个缺点就是调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）造成内存浪费. 这也是用的最多的一种

寄生组合继承

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

寄生组合继承是对组合继承的基础上的升华, 个人认为是堪称完美的继承方式,改进的组合继承内存浪费的问题^_^

GPU服务器私有云继承方式 php 类继承方式 javascript继承 js继承的几种方式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107172.html

javascript继承 --- 图解 ES5继承 VS ES6继承

摘要：继承的继承可以简单的认为就是上篇文章中的寄生组合继承模型几乎一模一样，只是在语法结构上多了和关键字，另外一个区别就是父类和子类通过连接。 ES5继承 VS ES6继承前言 ES6 已经发展了很长时间里 javascript相对于其他例如java等是一门比较怪异的语言, 由于其历史原因其继承机制和对象生成方式被人诟病. ES6 的出现将彻底改变这一现状, ES6 引入了新的生成对象(类...

陆斌 2019-08-26 11:35 评论0 收藏0
Javascript 五十问——实现的继承多种方式

摘要：组合继承实现了属性分离，方法共享下的完美继承方案继承我们的主角，，就是对组合继承的改进。这也是为什么在子类构造函数中一定要显示调用的原因。谈到继承，或者更广义上的：一个对象可以使用另外一个对象的属性或方法。实现起来无外乎有两种方式：apply or call 改变this的作用域原型继承改变__proto__指向，添加作用域链而JavaScript所有的继承实现，都是围绕以上两点...

BlackHole1 2019-08-23 14:37 评论0 收藏0
JavaScript继承理解：ES5继承方式+ES6Class继承对比

摘要：寄生组合式继承的继承方式有多种主要有原型链继承借用构造函数组合式继承寄生式继承和寄生组合式继承。中利用定义类，实现类的继承子类里调用父类构造函数实现实例属性和方法的继承子类原型继承父类原型，实现原型对象上方法的继承。 JavaScript中实现继承在JavaScript中实现继承主要实现以下两方面的属性和方法的继承，这两方面相互互补，既有共享的属性和方法，又有特有的属性和方法。 ...

liaoyg8023 2019-08-26 12:09 评论0 收藏0
JavaScript深入之继承的多种方式和优缺点

摘要：深入系列第十五篇，讲解各种继承方式和优缺点。优点融合原型链继承和构造函数的优点，是中最常用的继承模式。寄生组合式继承为了方便大家阅读，在这里重复一下组合继承的代码组合继承最大的缺点是会调用两次父构造函数。 JavaScript深入系列第十五篇，讲解JavaScript各种继承方式和优缺点。写在前面本文讲解JavaScript各种继承方式和优缺点。但是注意：这篇文章更像是笔记，哎...

JackJiang 2019-08-20 16:30 评论0 收藏0
ES6 系列之 Babel 是如何编译 Class 的(下)

摘要：以上的代码对应到就是调用父类的值得注意的是关键字表示父类的构造函数，相当于的。举个例子这是因为作为构造函数的语法糖，同时有属性和属性，因此同时存在两条继承链。子类的属性，表示构造函数的继承，总是指向父类。前言在上一篇《 ES6 系列 Babel 是如何编译 Class 的(上)》，我们知道了 Babel 是如何编译 Class 的，这篇我们学习 Babel 是如何用 ES5 实现...

endiat 2019-08-23 12:53 评论0 收藏0