ES5 与 ES6 转换简析(以 class 和 extends 为例)

一、前言

随着前端发展越来越快，ES6（ECMAScript 6）于 2015 年 6 月正式发布，成为前端开发者的常用写法；ES6最常用语法有：let、const、class、extends、Symbol、Proxy、set和map数据结构等等；在此不对语法做详细解析，想要了解的可以参考阮一峰老师的电子书（http://es6.ruanyifeng.com/）；本文主要围绕组件中最常用的class和extends转换成ES5语法做简析。

二、 ES6 转换后的 ES5 代码如下

1. 进入Babel的官网（https://www.babeljs.cn/），点击“试用”；

2. 将class与extends转换成ES5语法代码如下；

"use strict";

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

function _possibleConstructorReturn(self, call) {
    if (!self) {
        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
    }
    return call && (typeof call === "object" || typeof call === "function") ? call : self;
}

function _inherits(subClass, superClass) {
    if (typeof superClass !== "function" && superClass !== null) {
        throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
    }
    subClass.prototype = Object.create(superClass && superClass.prototype, {
        constructor: {
            value: subClass,
            enumerable: false,
            writable: true,
            configurable: true
        }
    });
    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}

function B() {
}

var A = function (_B) {
    _inherits(A, _B);

    function A() {
        _classCallCheck(this, A);

        return _possibleConstructorReturn(this, (A.__proto__ || Object.getPrototypeOf(A)).apply(this, arguments));
    }

    return A;
}(B);

三、ES6 转换为 ES5 的代码解析

1. 采用严格模式。

2. class A extends B {} 实际上就是创建了一个A方法用 B 方法来调用。

3. 在 A 方法内部，调用了 _inherits(A, _B) 和返回了名为 A 的方法。

4.  _inherits(A, _B)方法解析：1）_B 必须是一个函数（function）,否则抛错；2）将 _B 的原型（prototype）赋值给 A 的原型（prototype），并将 A 原型的构造函数指向 A 自己，即 A 可以继承 _B 上所有的属性和方法；3）将 _B 赋值给 A 的 _proto_。

5. 再看内部名为 A 的方法，调了 _classCallCheck(this, A) 和返回了 _possibleConstructorReturn：

classCallCheck(this, A) 方法是判断 this 必须是 A 的实例对象,否则抛错。

_possibleConstructorReturn 方法是 A 方法传入的参数如果是对象或者是方法则返回这个对象或者方法，如果不是，则返回 A 的实例对象。 

6. 流程图如下。