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

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