//转义前
class Parent{
constructor(name,age){
this.name = name
this.age = age
}
//类公有方法
sayName(){
console.log(this.name)
}
//静态方法
static sayhi(){
console.log(this.name)
}
}
//经过babel官网转义后
var Parent = /*#__PURE__*/function () {
function Parent(name, age) {
_classCallCheck(this, Parent);
this.name = name;
this.age = age;
}
_createClass(Parent, [{
key: "sayName",
value: function sayName() {
console.log(this.name);
}
}], [{
key: "sayhi",
value: function sayhi() {
console.log(this.name);
}
}]);
return Parent;
}();
1.从转义的结果来看,class的constructor本质上还是构造函数
2.首先通过_classCallCheck 来检测是否是new,而不是直接执行构造函数,在es5中是可以直接运行构造函数的,我们看下这个函数:
function _classCallCheck(instance, Constructor) {
if (! instance instanceof Constructor) {
throw new TypeError("Cannot call a class as a function");
}
}
_createClass第一个参数是构造函数,第二个是共有方法数组,被转成了有key和value两个属性的对象,第三个就是静态方法,结构和第二个参数一致
将共有的方法添加到原型对象上Parent.prototype,将静态的方法直接添加到构造函数上,这样就可以直接通过函数名点的形式调用方法
4.最后一步将新的函数返回
class继承:
1.用一个闭包保存父类引用,在闭包内部做子类构造逻辑
2.之后执行的是_inherits方法,它其实就是将子类构造函数的prototype指向父类构造函数的prototype,以及将父构造函数指向子构造函数的_proto_
_inherits先是校验父构造函数,是不是一个函数和null,
然后用父类构造函数的proptype创建一个空对象,并将这个对象指向子类构造函数的proptype,将子类原型对象的constructor指向子类构造函数本身
3.紧接着执行var _super = _createSuper(Child); 这个是干嘛的呢,这个就是之后为之后执行super,子类继承父类属性做准备