理解es6 class构造以及继承的底层实现原理

554 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第26天,点击查看活动详情

class的constructor本质上还是构造函数(ES6实例对象的构造函数就是该类本身;并且当我们new 类名()就是执行了constructor这个函数。)

Class

Class其实就是 es6 给我们提供了一个“组合寄生继承”的简单写法

我们来借助babel来探究class的实现原理

转换前:

image.png

转换后:

image.png

可见class的底层依然是构造函数:

1.调用_classCallCheck方法判断当前函数调用前是否有new关键字。

构造函数执行前有new关键字,会在构造函数内部创建一个空对象,将构造函数的proptype指向这个空对象的_proto_,并将this指向这个空对象。如上,_classCallCheck中:this instanceof Parent 返回true。

若构造函数前面没有new则构造函数的proptype不会不出现在this的原型链上,返回false。

2.将class内部的变量和函数赋给this。

3.执行constuctor内部的逻辑。

4.return this (构造函数默认在最后我们做了)。

继承

同样借助babel来探究继承的实现原理

转换前:

image.png

转换后:

image.png

1. 调用_inherits函数继承父类的proptype。

(1) 校验父构造函数。

(2) 典型的寄生继承:用父类构造函数的proptype创建一个空对象,并将这个对象指向子类构造函数的proptype。

(3) 将父构造函数指向子构造函数的_proto_

2. 用一个闭包保存父类引用,在闭包内部做子类构造逻辑。

3. new检查。

4. 用当前this调用父类构造函数。

5. 将行子类class内部的变量和函数赋给this。

6. 执行子类constuctor内部的逻辑。

Super

super代表父类构造函数。

super.fun1() 等同于 Parent.fun1() 或 Parent.prototype.fun1()。

super() 等同于Parent.prototype.construtor()