js中ES6继承和ES5继承之间的差别

目录
  • 继承方式
    • ES5prototype继承
    • ES6class继承
  • 二者区别
    • ES5prototype继承内部实现方式
    • ES6class继承内部实现方式
    • 扩展

继承方式

ES5 prototype 继承

通过原型链（构造函数 + [[prototype]]）指向实现继承。 （备注：后续__proto__我都会写成[[prototype]]这种形式）
子类的 prototype 为父类对象的一个实例。因此子类的原型对象包含指向父类的原型对象的指针，父类的实例属性为子类原型的属性。

// 父类：function SuperType；子类：function SubType；
SubType.prototype = new SuperType(); // SubType 继承 SuperType

// 根据上一节原型链讲到的知识点：实例化对象的__proto__等于构造函数的prototype
SubType.prototype.__proto__ === SuperType.prototype // true

上边的继承关系如下图：

内部实现机制上，ES5 的继承，实质是先创造子类的实例对象this上，然后再将父类的方法添加到这个this上。类似使用：Father.apply(this)

ES6 class 继承

通过class的extends + super实现继承。
子类没有自己的this对象，因此必须在 constructor 中通过 super 继承父类的 this 对象，而后对此this对象进行添加方法和属性。
super关键字在构造函数中表示父类的构造函数，用来新建父类的 this 对象。
内部实现机制上，ES6 的继承机制完全不同，实质是先创造父类的实例对象this---需要提前调用super方法，然后再用子类的构造函数修改this指针。

super用法

super 可以作为函数和对象使用的。
当作为函数使用的时候，只能在子类的构造函数中使用----表示父类的构造函数，但是 super 中的 this 指向的是子类的实例，因此在子类中super()表示的是 Father.prototype.constructor.call(this)。
当作为对象使用的时候，super表示父类的原型对象，即表示 Father.prototype

二者区别

答：不是完全一样的，主要有以下几个差异点：

  1. 写法不一样。class的继承通过extends关键字和super函数、super方法继承。（关于super实现继承的使用方式，具体我就不展开了）

  2. 类内部定义的方法都是不可枚举的，这个 ES5 不一样

  3. 类不存在变量提升，这一点与 ES5 完全不同

  4. 类相当于实例的原型，所有在类中定义的方法都会被实例继承。如果在一个方法前，加上 static 关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就成为静态方法

  5. 内部实现机制不一样。

ES5 prototype 继承 内部实现方式

ES5的继承，实质上是先创造子类的实例对象this，然后再将父类的方法添加到子类（this）上面---Father.apply(this)。

ES6 class 继承内部实现方式

ES6的继承机制完全不同，实质上是先创造父类的实例对象this，并将父类的属性和方法放到this上（前提是通过super函数调用），然后再用子类的构造函数修改this。

因为实现机制不同，导致这两种继承在继承原生构造函数时有些差异：

es5的写法不能继承原生构造函数（比如Array、Number等）
因为es5的继承是先创造子类的实例对象this，再将父类原型的属性和方法重写到子类上，因为没法访问父类的内部属性，导致es5的继承方式无法继原生的构造函数。
es6允许继承构造函数生成子类。因为es6是先创建父类的实例对象this，然后再用子类的构造函数修饰，所以子类就可以继承父类的所有属性和方法。因此class可以继承并自定义原生构造函数的子类。extends不仅可以用来继承类，还能用来继承原生构造函数，因此也就可以在原生数据结构的基础上，构造自定义的数据结构。

扩展

关于内部实现机制的说明，可以参考《阮一峰的es6文档-class的继承》相关部分

到此这篇关于java中ES6继承和ES5继承之间的差别的文章就介绍到这了,更多相关ES6继承和ES5继承的差别内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JS面向对象编程——ES6 中class的继承用法详解

    本文实例讲述了 ES6 中class的继承用法.分享给大家供大家参考,具体如下: JS是一种基于对象的语言,要实现面向对象,写法跟传统的面向对象有很大的差异.ES6引入了Class语法糖,使得JS的继承更像面向对象语言的写法. 此篇博客,分为:基本介绍.Vue使用案例 基本介绍 Class可以通过extends关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多: class Father { } class Son extends Father { } 代码定义了一个Son 类

  • 详解JavaScript之ES5的继承

    自从有了ES6的继承后,ES5的继承也退出了舞台,在实际开发也不会用得着,但在面试或许用的着: 先看看ES6的继承 class Father{ constructor(a){ console.log(a); } play(){ console.log("aaa"); } static run(){ console.log("static"); } } class Son extends Father{ constructor(){ super(); } } var

  • ES6 javascript中Class类继承用法实例详解

    本文实例讲述了ES6 javascript中Class类继承用法.分享给大家供大家参考,具体如下: 1. 基本用法 Class 之间可以通过extends关键字实现继承, 这比 ES5 的通过修改原型链实现继承, 要清晰和方便很多. class ColorPoint extends Point {} 上面代码定义了一个ColorPoint类, 该类通过extends关键字, 继承了Point类的所有属性和方法. 但是由于没有部署任何代码, 所以这两个类完全一样, 等于复制了一个Point类. 下

  • Javascript的ES5,ES6的7种继承详解

    目录 原型链继承 借用构造函数(经典继承) 组合式继承(原型链继承和借用构造函数合并) 原型式继承 寄生式继承 寄生组合式继承 ES6继承 总结 众所周知,在ES6之前,前端是不存在类的语法糖,所以不能像其他语言一样用extends关键字就搞定继承关系,需要一些额外的方法来实现继承.下面就介绍一些常用的方法,红宝书已经概括的十分全面了,所以本文基本就是对红宝书继承篇章的笔记和梳理. 原型链继承 function Parent() { this.name = 'arzh' } Parent.pro

  • JS高级ES6的6种继承方式

    JS高级ES6的6种继承方式

    目录 1.原型链继承 2.借助构造函数继承 3.组合式继承 4.原型式继承 5.寄生式继承 6.寄生组合式继承 前言: 继承是面向对象中老生常谈的一个内容,在ECMAScript6之前,JavaScript中的继承可谓是非常的繁琐的,有各种各样的继承,本质上所有的继承都是离不开原型链的,ES6新增的extends关键字也是通过原型链实现的继承,但是语法相对来说就简单了很多. 关于原型链的内容,可以参考上篇文章两张图搞懂原型链 本篇文章就来介绍一下在ECMAScript6之前是怎么实现继承的. 1

  • js中ES6继承和ES5继承之间的差别

    目录 继承方式 ES5prototype继承 ES6class继承 二者区别 ES5prototype继承内部实现方式 ES6class继承内部实现方式 扩展 继承方式 ES5 prototype 继承 通过原型链(构造函数 + [[prototype]])指向实现继承. (备注:后续__proto__我都会写成[[prototype]]这种形式) 子类的 prototype 为父类对象的一个实例.因此子类的原型对象包含指向父类的原型对象的指针,父类的实例属性为子类原型的属性. // 父类:fu

  • js中常见的6种继承方式总结

    目录 前言 1.原型继承 2.盗用构造函数 3.组合继承 4.原型式继承 5.寄生式继承 6.寄生式组合继承 总结 前言 js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式 温馨提示:本文中Super函数都是指父类,Sub函数都是代表子类.同时文中会涉及到“构造函数模式”和“工厂模式”,如果不熟悉的小伙伴,可以先看看这篇介绍 js常见的4种创建对象方式. 1.原型继承 实现: fu

  • Node.js中ES6模块化及Promise对象

    目录 ES6模块化 CommonJS 规范 模块化开发好处 模块化规范划分 ES6模块化开发注意点 ES6 导入导出 Promise对象 使用语法 Promise中的同步异步 Promise 封装 第三方then-fs解决回调地狱 ES6模块化 CommonJS 规范 node.js 遵循了 CommonJS 的模块化规范.其中: 导入其它模块使用 require()方法 模块对外共享成员使用 module.exports 对象 模块化开发好处 模块化开发的好处有很多,其中: 实现了在JS文件中

  • 有关JS中的0,null,undefined,[],{},'''''''',false之间的关系

    有关JS中的0,null,undefined,[],{},'''''''',false之间的关系

    0与一些虚值的比较: 0与false 0==false true 0与'': 0=='' true 0与[]: 0==[] true 0与NaN: 0==NaN false 0与undefined 0==undefined false 0与null 0==null false 0与{} 0=={} false ''空值与一些值的比较 '' == false true ''==undefined false ''==null false ''==NaN false ''==[] true ''==

  • js中实现多态采用和继承类似的方法

    多态的实现可以采用和继承类似的方法.首先定义一个抽象类,其中调用一些虚方法,虚方法在抽象类中没用定义,而是通过其具体的实现类来实现. 如下面的例子: Object.extend=function(destination,source){ for(property in source){ destination[property]=source[property]; } return destination; } //定义一个抽象基类base,无构造函数 function base(){}; ba

  • 判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解

    1.typeof(param) 返回param的类型(string) 这种方法是JS中的定义的全局方法,也是编译者们最常用的方法,优点就是使用简单.好记,缺点是不能很好的判断object.null.array.regexp和自定义对象. 示例代码: 复制代码 代码如下: var str='str';var arr=['1','2'];var num=1;var bool=true;var obj={name:'test'};var nullObj=null;var undefinedObj=un

  • JS中的六种继承方式以及优缺点总结

    JS中的六种继承方式以及优缺点总结

    目录 前言 原型链继承 构造函数继承 组合继承(原型链继承和构造函数继承组合) 寄生式继承 组合寄生式继承 extends继承 总结 前言 继承是JS世界中必不可少的一个环节,号称JS的三座大山之一,使用这种方式我们可以更好地复用以前的开发代码,缩短开发的周期.提升开发效率 在ES6之前,JS中的类都是通过构造函数模拟的,并不存在真正意义上的类,虽然ES6的类知识一个语法糖

  • 老生常谈JS中的继承及实现代码

    JS虽然不像是JAVA那种强类型的语言,但也有着与JAVA类型的继承属性,那么JS中的继承是如何实现的呢? 一.构造函数继承 在构造函数中,同样属于两个新创建的函数,也是不相等的 function Fn(name){ this.name = name; this.show = function(){ alert(this.name); } } var obj1 = new Fn("AAA"); var obj2 = new Fn("BBB"); console.lo

  • JS中的继承操作实例总结

    本文实例讲述了JS中的继承操作.分享给大家供大家参考,具体如下: 1.原型链继承 function SuperType() { this.property = true; } SuperType.prototype.getSuperValue = function() { return this.property; } function SubType() { ths.subproperty = false; } SubType.prototype = new SuperType(); // 实

随机推荐