假如你已看过第一篇揭秘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撸出很多页面，但是为何觉得提高很慢处于瓶颈中、口试也总被挂呢？”