持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第26天,点击查看活动详情
class的constructor本质上还是构造函数(ES6实例对象的构造函数就是该类本身;并且当我们new 类名()就是执行了constructor这个函数。)
Class
Class其实就是 es6 给我们提供了一个“组合寄生继承”的简单写法
我们来借助babel来探究class的实现原理
转换前:
转换后:
可见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来探究继承的实现原理
转换前:
转换后:
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()