送你一把鑰匙，讓你掀開ES6的神祕面紗
摘要：
ES6實踐
JavaScript已經是網際網路開發的第一大語言，而且正在變成一種全領域的語言，著名的程式員Jeff Atwood說過：“所有可以用JavaScript編寫的程式，最終都會出現JavaScript的版本”。
ES6是歷史上最大的一次版本升級，即使是熟練的Jav...
ES6實踐
JavaScript已經是網際網路開發的第一大語言，而且正在變成一種全領域的語言，著名的程式員Jeff Atwood說過：“所有可以用JavaScript編寫的程式，最終都會出現JavaScript的版本”。
ES6是歷史上最大的一次版本升級，即使是熟練的JavaScript程式設計師，也需要重新學習。JavaScript的學習，可以閱讀阮一峰的專欄，寫的非常好，專欄地址如下：
ofollow,noindex">http://es6.ruanyifeng.com/
ES6本質上是一種語法糖，ES6寫的程式碼，大部分都可以轉換成ES5的程式碼。同一份程式碼，提供ES6、ES5的兩個版本，做一下比較，會幫助我們理解ES6的本質。
本文介紹一下ES6轉換成ES5的方法，當自己讀到某段ES6程式碼，想了解一下其裡面的實現原理的話，將其轉換成ES5，對比閱讀是最好的方法。
1、安裝Node
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的底層實現邏輯