ES6 class 与 ES5 构造函数差异-笔记

1,149 阅读2分钟

es6 class vs es5 构造函数区别

  1. 类必须使用new调用,否则会报错

  2. 类和模块的内部,默认就是严格模式,所以不需要使用use strict指定运行模式。只要你的代码写在类或模块之中,就只有严格模式可用。考虑到未来所有的代码,其实都是运行在模块之中,所以 ES6 实际上把整个语言升级到了严格模式

  3. 类不存在变量提升(hoist),这一点与 ES5 完全不同

  4. 类的内部所有定义的方法,都是不可枚举的

super

  1. 子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类自己的this对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,加上子类自己的实例属性和方法。如果不调用super方法,子类就得不到this对象。

  2. super作为函数调用时,代表父类的构造函数。ES6 要求,子类的构造函数必须执行一次super函数。

  3. super作为对象时,在普通方法中,指向父类的原型对象;在静态方法中,指向父类

<script>
class A {}
class B extends A { constructor() { super() }}
</script>

super虽然代表了父类A的构造函数,但是返回的是子类B的实例,即super内部的this指的是B的实例,因此super()在这里相当于A.prototype.constructor.call(this)

继承区别

  1. ES5 的继承,实质是先创造子类的实例对象this,然后再将父类的方法添加到this上面 Parent.apply(this)

  2. ES6 的继承机制完全不同,实质是先将父类实例对象的属性和方法,加到this上面(所以必须先调用super方法),然后再用子类的构造函数修改this。

参考 阮一峰老师 https://es6.ruanyifeng.com/#docs/class