送你一把钥匙，让你掀开ES6的神秘面纱

ES6实践

JavaScript已经是互联网开发的第一大语言，而且正在变成一种全领域的语言，著名的程序员Jeff Atwood说过：“所有可以用JavaScript编写的程序，最终都会出现JavaScript的版本”。

ES6是历史上最大的一次版本升级，即使是熟练的JavaScript程序员，也需要重新学习。JavaScript的学习，可以阅读阮一峰的专栏，写的非常好，专栏地址如下：

http://es6.ruanyifeng.com/

ES6本质上是一种语法糖，ES6写的代码，大部分都可以转换成ES5的代码。同一份代码，提供ES6、ES5的两个版本，做一下比较，会帮助我们理解ES6的本质。

本文介绍一下ES6转换成ES5的方法，当自己读到某段ES6代码，想了解一下其里面的实现原理的话，将其转换成ES5，对比阅读是最好的方法。

1、安装Node

https://nodejs.org/zh-cn/

2、安装Webstorm

http://www.jetbrains.com/webstorm/

3、安装es-checker

es-checker是阮一峰写的一个模块，可以检查当前运行环境对ES6的支持度。

npm install -g es-checker
es-checker

4、创建测试工程【ES6Test】

打开Webstorm，新建一个空的工程【ES6Test】

5、安装babel插件

babel插件，可以将es6的代码转换成es5，我们可以借此窥视es6的实际实现逻辑

注意：执行下面的命令时，需要把CMD命令行工具的当前目录设置为【ES6Test】下面

npm install --save-dev babel-preset-latest
npm install --save-dev babel-preset-react
npm install --save-dev babel-preset-stage-2
npm install --global babel-cli

6、在ES6Test工程下，添加.babelrc

.babelrc是babel插件的配置文件

{
  "presets": [
    "latest",
    "react",
    "stage-2"
  ],
  "plugins": []
}

7、修改package.json

在进行第5步的时候，系统会系统生成package.json，该文件的作用，先不用理会，我们现在只需要把下面的内容添加到该文件中.

"scripts": {
    "build": "babel src -d lib"
  },

8、新建src目录

9、在src目录，新建ES6Test.js

我们在该文件中编写ES6的代码

10、将ES6的代码转换成ES5

npm run build

执行上面的语句后，我们的工程下面会生成一个lib目录，理解就存放了转换好的ES5的代码

11、测试效果

• ES6代码

class Persion {
    constructor(name) {
        this.name = name;
    }

    sayName() {
        console.log(this.name);
    }
}

const p = new Persion('张三');
p.sayName();

• 转换后的ES5代码

'use strict';

var _createClass = function () {
    function defineProperties(target, props) {
        for (var i = 0; i < props.length; i++) {
            var descriptor = props[i];
            descriptor.enumerable = descriptor.enumerable || false;
            descriptor.configurable = true;
            if ("value" in descriptor) descriptor.writable = true;
            Object.defineProperty(target, descriptor.key, descriptor);
        }
    }

    return function (Constructor, protoProps, staticProps) {
        if (protoProps) defineProperties(Constructor.prototype, protoProps);
        if (staticProps) defineProperties(Constructor, staticProps);
        return Constructor;
    };
}();

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

var Persion = function () {
    function Persion(name) {
        _classCallCheck(this, Persion);

        this.name = name;
    }

    _createClass(Persion, [{
        key: 'sayName',
        value: function sayName() {
            console.log(this.name);
        }
    }]);

    return Persion;
}();

var p = new Persion('张三');
p.sayName();

通过这种方法，我们可以很轻易的了解ES6的底层实现逻辑