ES6实践
JavaScript已经是互联网开发的第一大语言，而且正在变成一种全领域的语言，著名的程序员Jeff Atwood说过：“所有可以用JavaScript编写的程序，最终都会出现JavaScript的版本”。
ES6是历史上最大的一次版本升级，即使是熟练的JavaScript程序员，也需要重新学习。JavaScript的学习，可以阅读阮一峰的专栏，写的非常好，专栏地址如下：
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的底层实现逻辑
网友评论