揭秘babel的魔法之class继承的处理

如果你已经看过第一篇揭秘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撸出好多页面,可是为什么感觉进步很慢处于瓶颈中、面试也总被挂呢?”