如果你已经看过第一篇揭秘babel的魔法之class魔法处理,这篇将会是一个延伸;
如果你还没看过,并且也不想现在就去读一下,单独看这篇也没有关系,并不存在理解上的障碍。
上一篇针对Babel对ES6里面基础“class”的编译进行了分析。这一篇将会对class的继承,包括extends和super进行讲解。
什么?你还不了解ES6如何实现继承?没关系,下文内容也有详细示例。
再啰嗦一句,这一系列的文章并不是科普ECMAScript新规范。她的意义在于分析Babel对ES6的编译,从而希望读者对JS语言基础,程序设计理念等有更深刻的认识。
Class的继承
在这篇文章中,我会讲解Babel如何处理ES6 Class里面的继承功能,同样,这其实是一系列语法糖的实现。
我们先来温习一下实现方式:
ES6 实现继承
首先,我们定义一个父类:
class Person {
constructor(){
this.type = 'person'
}
}
这个类包含了一个实例属性。
然后,实现一个Student类,这个“学生”类继承“人”类:
class Student extends Person {
constructor(){
super()
}
}
从简出发,我们定义的Person类只包含了type为person的这一个属性,不含有方法。所以我们extends+super()之后,Student类
也继承了同样的属性。
如下:
var student1 = new Student();
student1.type // "person"
我们进一步可以验证原型链上的关系:
student1 instanceof Student // true
student1 instanceof Person // true
student1.hasOwnProperty('type') // true
一切看上去cool极了,我们实现了ES6里面的继承。并且用instanceof验证了ES6中一系列的实质就是“魔法糖”的本质。
那么,经过Babel编译,我们的代码是什么样呢?
Babel transformation
我们一步一步来看,
Step1: Person定义
class Person {
constructor(){
this.type = 'person'
}
}
被编译为:
var Person = function Person() {
_classCallCheck(this, Person);
this.type = 'person';
};
如果你看过这一篇的前传,
你应该就熟悉这一系列的变换,也可能会记得_classCallCheck函数到底是什么鬼。这里因为篇幅和去冗余的原因,就不再展开。
Step2:Student探秘
我们这次尝试观察Student子类:
class Student extends Person {
constructor(){
super()
}
}
编译结果:
// 实现定义Student构造函数,它是一个自执行函数,接受父类构造函数为参数
var Student = (function(_Person) {
// 实现对父类原型链属性的继承
_inherits(Student, _Person);
// 将会返回这个函数作为完整的Student构造函数
function Student() {
// 使用检测
_classCallCheck(this, Student);
// _get的返回值可以先理解为父类构造函数
_get(Object.getPrototypeOf(Student.prototype), 'constructor', this).call(this);
}
return Student;
})(Person);
// _x为Student.prototype.__proto__
// _x2为'constructor'
// _x3为this
var _get = function get(_x, _x2, _x3) {
var _again = true;
_function: while (_again) {
var object = _x,
property = _x2,
receiver = _x3;
_again = false;
// Student.prototype.__proto__为null的处理
if (object === null) object = Function.prototype;
// 以下是为了完整复制父类原型链上的属性,包括属性特性的描述符
var desc = Object.getOwnPropertyDescriptor(object, property);
if (desc === undefined) {
var parent = Object.getPrototypeOf(object);
if (parent === null) {
return undefined;
} else {
_x = parent;
_x2 = property;
_x3 = receiver;
_again = true;
desc = parent = undefined;
continue _function;
}
} else if ('value' in desc) {
return desc.value;
} else {
var getter = desc.get;
if (getter === undefined) {
return undefined;
}
return getter.call(receiver);
}
}
};
function _inherits(subClass, superClass) {
// superClass需要为函数类型,否则会报错
if (typeof superClass !== 'function' && superClass !== null) {
throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass);
}
// Object.create第二个参数是为了修复子类的constructor
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
// Object.setPrototypeOf是否存在做了一个判断,否则使用__proto__
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}
虽然我加上了注释,但是这一坨代码仍然看上去恶心极了!没关系,下面我们进行拆解,你很快就能明白。
Step3:抽丝剥茧
我们首先看Student的编译结果:
var Student = (function(_Person) {
_inherits(Student, _Person);
function Student() {
_classCallCheck(this, Student);
_get(Object.getPrototypeOf(Student.prototype), 'constructor', this).call(this);
}
return Student;
})(Person);
这是一个自执行函数,它接受一个参数Person(就是他要继承的父类),返回一个构造函数Student。
上面_inherits方法的本质其实就是让Student子类继承Person父类原型链上的方法。它实现原理可以归结为一句话:
Student.prototype = Object.create(Person.prototype);
Object.setPrototypeOf(Student, Person)
注意,Object.create接收第二个参数,这就实现了对Student的constructor修复。
如果你不了解Object.create,那么请参考这里。
以上通过_inherits实现了对父类原型链上属性的继承,那么对于父类的实例属性(就是constructor定义的属性)的继承,也可以归结为一句话:
Person.call(this);
如果你还不理解使用call或者apply或者bind来改变JS中this的指向,那么请参考这篇文章。
这样,我们便透析了Babel编译这一切的秘密。
总结
如果你看完这一系列的文章可能会有体会:我想灌输的肯定不是ES6新特性的使用,关于这些东西有太多的文章、博客、书籍去讨论。
我是在讲Babel对这些新特性的编译产出,那为什么我会在乎这些呢?
其实通过分析,我们悄然回顾了JS中很多重点以及难点,还包括程序设计上的一些小思想。
最近面试了很多前端“新同学”:有的人痴迷于框架,可以使用React或者Vue比照tutorial做出页面炫酷的交互,甚至自觉SPA也不在话下;
有的人ES6、ES7了解很多,generator,async都能说出一二,仿佛Promise处理异步已经成为了“时代弃儿”。
可是同样是这些人,对原型原型链、this、作用域、闭包都没有深刻地理解和掌握。
同样是这些页面,即便用callback处理异步回调,嵌套最多也不到两层。
也许,同样一批人也会问:“我能用前端框架、ES6撸出好多页面,可是为什么感觉进步很慢处于瓶颈中、面试也总被挂呢?”
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。