es2015学习笔记>经典入门教程

墨蓝 2022-06-08 02:26 241阅读 0赞

es2015也称为ES6，是JavaScript语言的下一代标准，下面将分享如何一步步解开它的面纱，哟没有一种幸福感O(∩\_∩)O哈哈~

**目录**

1.   简介

2.   为什么要了解es6

3.   ES-Checker

4.   Babel

5.   开发工具

5.1.  Sublime Text

5.2.  WebStorm

6.   es6新语法

6.1.  Let/const和块级作用域

6.2.  箭头函数

6.3.  模板字符串

6.4.  对象字面量拓展语法

6.5.  变量解构赋值

6.6.  函数参数表达/传参

6.7.  Set/WeakSet/Map/WeakMap

6.8.  Class

6.9.  Generator

6.10.    Promise

6.11.    Symbol

6.12.    Proxy

6.13.    原生的模块化

7.   es7透析

7.1.  async/await

7.2.  Decorators

8.   参与资料

9.   Q&A

9.1. 什么时候不能用箭头函数

--------------------

# 1. 简介 #

ECMAScript6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年6月批准通过发布的，所以又称ECMAScript 2015, 是自从2009年ES5标准化后的第一次重大更新。。虽然目前并不是所有浏览器都能兼容ES6全部特性，但越来越多的程序员在实际项目当中已经开始使用ES6了。

# 2. 为什么要了解es6 #

随着越来越多的程序员在实际项目当中已经开始使用ES6了。所以就算你现在不打算使用ES6，但为了看懂别人的你也该懂点ES6的语法了...如：

***var*** *sum****=****0****;***

***\[****2.3****,****2****,****2****\].****map****(function(****elem****)\{***

*sum****+=****elem****;***

***\});***

*console****.****log****(****'sum='****+****sum****);***

注：Angular.js、react.js、vue.js都是以es6为标准的，koa框架（node的mvc）致力于全栈开发也全部兼容

# 3. ES-Checker #

[ES-Checker][]用来检查各种运行环境对ES6 的支持情况

$ npm install -g es-checker

$ es-checker

# 4. Babel #

Babel是一个广泛使用的 **ES6 转码器**，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。

Babel的配置文件是.babelrc，存放在项目的根目录下。使用 Babel 的第一步，就是配置这个文件。

**在线转换**：[http://babeljs.io/][http_babeljs.io]

**工具：**

Ø  **bable-loader**

安装bable-loader

$npm install bable-loader –g

安装转换规则

$npm install bable-preset-es2015 –save-dev

Ø  babel-cli工具，用于命令行转码；

***$ npm*** *install* ***--****g babel-cli*

*\# 转码结果输出到标准输出*

***$ babel*** *example.js*

*\# 转码结果写入一个文件*

*\# --out-file 或 \-o 参数指定输出文件*

***$ babel*** *example.js* ***--****out-file compiled.js*

*\# 或者*

***$ babel*** *example.js -o compiled.js*

*\# 整个目录转码*

*\# --out-dir 或 \-d 参数指定输出目录*

***$ babel*** *src* ***--****out-dir lib*

*\# 或者*

***$ babel*** *src -d lib*

*\# -s 参数生成source map文件*

***$ babel*** *src -d lib -s*

Ø  babel-node：babel-cli工具自带一个命令，提供一个支持ES6的REPL环境。它支持Node的REPL环境的所有功能，而且可以直接运行ES6代码；

Ø  babel-register：该模块改写require命令，为它加上一个钩子。此后，每当使用require加载.js、.jsx、.es和.es6后缀名的文件，就会先用Babel进行转码；

Ø  babel-core：如果某些代码需要调用 Babel 的 API 进行转码，就要使用该模块；

Ø  babel-polyfill：Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API

# 5. 开发工具 #

## 5.1. Sublime Text ##

1)        下载压缩包地址：[https://github.com/tanepiper/SublimeText-Nodejs][https_github.com_tanepiper_SublimeText-Nodejs]

2)        解压zip文件，并重命名文件夹“Nodejs”

3)        打开sublime，操作"preference"-->"Browse packages", 把Nodejs复制到该目录

4)        打开Nodejs文件夹，找到文件“Nodejs.sublime-build”，要更改encoding为GB2312或者utf8否则终端显示乱码

5)        要用sublime打开文件“Nodejs.sublime-settings”并修改

"node\_command":"D:\\Program\\nodejs\\node.exe",

"npm\_command":"D:\\Program\\nodejs\\npm.cmd",

6)        重启sublime

新建一个test.js文件,按 Ctrl + B 或者F7运行，[快速熟悉快捷键][Link 1]。

## 5.2.  WebStorm ##

绝对是前端开发大型应用的利器之一，后续介绍

# 6.   es6新语法 #

## 6.1.  Let/const和块级作用域 ##

在ES2015的新语法中，影响速度最为直接范围最大的，恐怕就是 let 和 const 了，它们是继var 之后，新的变量定义方法。与 let 相比，const 更容易被理解：const 也就是 constant 的缩写，跟 C/C++ 等经典语言一样，用于定义常量，即不可变量。但由于在ES6之前的 ECMAScript 标准中，并没有原生的实现，所以在降级编译中，会马上进行引用检查，然后使用 var 代替。

*// foo.js*

***const*** *foo* ***=****'bar'*

*foo* ***=****'newvalue'*

*$ babel foo****.****js*

***...***

*SyntaxError****:*** *test****.****js****:*** *Line 3****:****"foo" is read****-****only*

*  1****|**const*** *foo* ***=****'bar'*

*  2****|***

***>****3****|*** *foo* ***=****'newvalue'*

***...***

***块级作用域***

在ES6诞生之前，给JavaScript 新手解答困惑时，经常会提到一个观点：JavaScript 没有块级作用域。这个问题之所以为人所熟知，是因为它引发了诸如历遍监听事件需要使用闭包解决等问题。

***<button>****一****</button>***

***<button>****二****</button>***

***<button>****三****</button>***

***<button>****四****</button>***

***<****div id****=****"output"****></****div****>***

***<****script****>***

* * ***var*** *buttons* ***=**document.****querySelectorAll****(****'button'****)***

* * ***var*** *output* ***=**document.****querySelector****(****'\#output'****)***

* * ***for**(var*** *i* ***=****0****;*** *i* ***<*** *buttons****.****length****;*** *i****++)**\{***

*   buttons****\[****i****\].****addEventListener****(****'click'****,**function()**\{***

*     output****.****innerText* ***=*** *buttons****\[****i****\].****innerText*

*   * ***\})***

* * ***\}***

***</****script****>***

运行时就会报出这样的错误信息：

Uncaught TypeError: Cannot readproperty 'innerText' of undefined

出现这个错误的原因是因为buttons\[i\]不存在，即为undefined。对i的变量引用(Reference)一直保持在上一层作用域（循环语句所在层）上，而当循环结束i 则正好是 buttons.length。而在ES6中，我们只需做出一个小小的改动，便可以解决该问题（假设所使用的浏览器已经支持所需要的特性）：

*// ...*

***for**(****/\* var \*/* ***let*** *i* ***=****0****;*** *i* ***<*** *buttons****.****length****;*** *i****++)**\{***

*  // ...*

***\}***

*// ...*

改进后的代码经过 babel 的编译后的代码：

*// ...*

***var*** *\_loop* ***=**function**(****i****)**\{***

* buttons****\[****i****\].****addEventListener****(****'click'****,**function**()**\{***

*   output****.****innerText* ***=*** *buttons****\[****i****\].****innerText*

* * ***\})***

***\}***

***for**(var*** *i* ***=****0****;*** *i* ***<*** *buttons****.****length****;*** *i****++)**\{***

*  \_loop****(****i****)***

***\}***

*// ...*

## 6.2.  箭头函数 ##

继let和const之后，箭头函数就是使用率最高的新特性。顾名思义便是使用箭头(=>)进行定义的函数，属于匿名函数（Lambda）一类。当然了，也可以作为定义式函数使用，但我们并不推荐这样做，随后会详细解释。

***使用（用法）***

*foo* ***=>*** *foo* ***+****' world'//means return\`foo + ' world'\`*

***(****foo****,*** *bar****)**=>*** *foo* ***+*** *bar*

*foo* ***=>**\{***

* * ***return*** *foo* ***+****' world'*

***\}***

***(****foo****,*** *bar****)**=>**\{***

* * ***return*** *foo* ***+*** *bar*

***\}***

其最大的好处便是简洁明了，省略了function关键字，而使用=>代替。

***let*** *names* ***=**\[****'Will'****,****'Jack'****,****'Peter'****,****'Steve'****,****'John'****,****'Hugo'****,****'Mike'****\]***

***let*** *newSet* ***=*** *names*

* * ***.****map****((****name****,*** *index****)**=>**\{***

*   * ***return**\{***

*     id****:*** *index****,***

*     name****:*** *name*

*   * ***\}***

* * ***\})***

* * ***.****filter****(****man* ***=>*** *man****.****id* ***%****2****==****0****)***

* * ***.****map****(****man* ***=>**\[****man****.****name****\])***

* * ***.****reduce****((****a****,*** *b****)**=>*** *a****.****concat****(****b****))***

*console****.****log****(****newSet****)****//=> \[ 'Will','Peter', 'John', 'Mike' \]*

***箭头函数与上下文绑定***

参考CoffeeScript 中的定义一般，是用于对函数内部的上下文 （this）绑定为定义函数所在的作用域的上下文。

***let*** *obj* ***=**\{***

*  hello****:****'world'****,***

*  foo****()**\{***

*   * ***let*** *bar* ***=**()**=>**\{***

*     * ***return**this.****hello*

*   * ***\}***

*   * ***return*** *bar*

* * ***\}***

***\}***

***window.****hello* ***=****'ES6'*

***window.****bar* ***=*** *obj****.****foo****()***

***window.****bar****()****//=> 'world'*

上面代码中的 obj.foo 等价于：

*// ...*

*foo****()**\{***

* * ***let*** *bar* ***=**(function()**\{***

*   * ***return**this.****hello*

* * ***\}).****bind****(this)***

* *

* * ***return*** *bar*

***\}***

*// ...*

***注意事项***

另外，要注意的是箭头函数对上下文的绑定是强制性的，无法通过 apply 或 call 方法改变其上下文。

***let*** *a* ***=**\{***

*  init****()**\{***

*   * ***this.****bar* ***=**()**=>**this.****dam*

* * ***\},***

*  dam****:****'hei'****,***

*  foo****()**\{***

*   * ***return**this.****dam*

* * ***\}***

***\}***

***let*** *b* ***=**\{***

*  dam****:****'ha'*

***\}***

*a****.****init****()***

*console****.****log****(****a****.****foo****())****//=> hei*

*console****.****log****(****a****.****foo****.****bind****(****b****).****call****(****a****))****//=> ha*

*console****.****log****(****a****.****bar****.****call****(****b****))****//=> hei*

另外，因为箭头函数会绑定上下文的特性，故不能随意在顶层作用域使用箭头函数，以防出错：

// 假设当前运行环境为浏览器，故顶层作上下文为 \`window\`

***let*** *obj* ***=**\{***

*  msg****:****'pong'****,***

*  ping****:**()**=>**\{***

*   * ***return**this.****msg // Warning!*

* * ***\}***

***\}***

*obj****.****ping****()****//=> undefined*

***let*** *msg* ***=****'bang!'*

*obj****.****ping****()****//=> bang!*

*//  等价于：*

***let*** *obj* ***=**\{***

*  // ...*

*  ping****:**(function()**\{***

*   * ***return**this.****msg // Warning!*

* * ***\}).****bind****(this)***

***\}***

*//  同样等价于*

***let*** *obj* ***=**\{*** */\* ... \*/****\}***

*obj****.****ping* ***=**(function()**\{***

* * ***return**this.****msg*

***\}).****bind****(this****/\* this -> window \*/****)***

## 6.3.  模板字符串 ##

模板字符串模板出现简直对 Node.js 应用的开发和发展起到了相当大的推动作用。模板字符串要求使用 \` 代替原本的单/双引号来包裹字符串内容。它有两大特点：

l  支持变量注入

***let*** *name* ***=****'Will Wen Gunn'*

***let*** *title* ***=****'Founder'*

***let*** *company* ***=****'LikMoon Creation'*

***let*** *greet* ***=****\`Hi, I'm $\{name\}, I am the$\{title\} at $\{company\}\`*

*console****.****log****(****greet****)****//=> Hi, I'm Will Wen Gunn, I am theFounder at LikMoon Creation*

l  支持换行

**let** sql **=**\`

SELECT \* FROM Users

WHERE FirstName='Mike'

LIMIT 5;

console**.**log**(**sql**)**

## 6.4.  对象字面量拓展语法 ##

对象字面量的语法在 ES2015 之前早已挺完善的了。不过，对于聪明的工程师们来说，细微的改变，也能带来不少的价值。

***方法属性省略function***

***let*** *obj* ***=**\{***

*  // before*

*  foo****:**function()**\{***

*   * ***return****'foo'*

* * ***\},***

*  // after*

*  bar****()**\{***

*   * ***return****'bar'*

* * ***\}***

***\}***

***支持 \_\_proto\_\_ 注入***

在 ES2015 中，我们可以给一个对象硬生生的赋予其 \_\_proto\_\_，这样它就可以成为这个值所属类的一个实例了。

***class*** *Foo* ***\{***

* * ***constructor()**\{***

*   * ***this.****pingMsg* ***=****'pong'*

* * ***\}***

*  ping****()**\{***

*   console****.****log****(this.****pingMsg****)***

* * ***\}***

***\}***

***let*** *o* ***=**\{***

* \_\_proto\_\_****:**new*** *Foo****()***

***\}***

*o****.****ping****()****//=> pong*

有什么卵用？有一个比较特殊的场景会需要用到：我想扩展或者覆盖一个类的方法，并生成一个实例，但觉得另外定义一个类就感觉浪费了。那我可以这样做：

*let o =\{*

* \_\_proto\_\_:new Foo(),*

*  constructor()\{*

*     this.pingMsg ='alive'*

*  \},*

*  msg:'bang',*

*  yell()\{*

*   console.log(this.msg)*

*  \}*

*\}*

*o.yell()//=> bang*

*o.ping()//=> alive*

***同名方法属性省略语法***

也是看上去有点鸡肋的新特性，不过在做 JavaScript 模块化工程的时候则有了用武之地。

*// module.js*

***export**default**\{***

* someMethod*

***\}***

***function*** *someMethod****()**\{***

*  // ...*

***\}***

*// app.js*

***import*** *Module* ***from****'./module'*

*Module****.****someMethod****()***

***可以动态计算的属性名称***

在上面的两个\[...\] 中，我演示了动态计算的对象属性名称的使用，分别为对应的对象定义了当前计数器n和n的2次方

***let*** *arr* ***=**\[****1****,****2****,****3****\]***

***let*** *outArr* ***=*** *arr****.****map****(****n* ***=>**\{***

* * ***return**\{***

*   * ***\[*** *n* ***\]:*** *n****,***

*   * ***\[****\`$\{n\}^2\`****\]:****Math****.****pow****(****n****,****2****)***

* * ***\}***

***\})***

*console****.****dir****(****outArr****)****//=> \[\{ '1': 1, '1^2': 1 \},\{ '2': 2, '2^2': 4 \},\{'3': 3, '3^2': 9 \}\]*

## 6.5.  变量解构赋值 ##

ES6 允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

***数组***

***let*** *a* ***=****1****;***

***let*** *b* ***=****2****;***

***let*** *c* ***=****3****;***

*//现在可以这样*

***let**\[****a****,*** *b****,*** *c****\]**=**\[****1****,****2****,****3****\];***

***let**\[****foo****,**\[\[****bar****\],*** *baz****\]\]**=**\[****1****,**\[\[****2****\],****3****\]\];***

*foo  // 1*

*bar  // 2*

*baz  // 3*

* *

***let**\[**,**,*** *third****\]**=**\[****"foo"****,****"bar"****,****"baz"****\];***

*third  // "baz"*

* *

***let**\[****x****,**,*** *y****\]**=**\[****1****,****2****,****3****\];***

*x // 1*

*y // 3*

* *

***let**\[****head****,**...****tail****\]**=**\[****1****,****2****,****3****,****4****\];***

*head  // 1*

*tail  // \[2, 3, 4\]*

* *

***let**\[****x****,*** *y****,**...****z****\]**=**\[****'a'****\];***

*x // "a"*

*y // undefined*

*z // \[\]*

如果解构不成功，变量的值就等于undefined。

*// Matching with object*

***function*** *search****(****query****)**\{***

*  // ...*

*  // let users = \[ ... \]*

*  // let posts = \[ ... \]*

*  // ...*

* * ***return**\{***

*   users****:*** *users****,***

*   posts****:*** *posts*

* * ***\}***

***\}***

***let**\{***  *users****,*** *posts* ***\}**=*** *search****(****'iwillwen'****)***

*// Matching with array*

***let**\[*** *x****,*** *y* ***\]**=**\[****1****,****2****\]***

*// missing one*

***\[*** *x****,**,****y* ***\]**=**\[****1****,****2****,****3****\]***

***function*** *g****(\{*** *name****:*** *x****\})**\{***

* console****.****log****(****x****)***

***\}***

*g****(\{*** *name****:****5****\})***

*// Fail-soft destructuring*

***var**\[****a****\]**=**\[\]***

*a* ***===****undefined//=> true*

*// Fail-soft destructuring with defaults*

***var**\[****a* ***=****1****\]**=**\[\]***

*a* ***===****1//=> true*

***默认值***

***let**\[****foo* ***=**true\]**=**\[\];***

*foo  // true*

***对象***

***let**\{***  *foo****,*** *bar* ***\}**=**\{***  *foo****:****"aaa"****,*** *bar****:****"bbb"****\};***

*foo  // "aaa"*

*bar  // "bbb"*

***let**\{***  *baz* ***\}**=**\{***  *foo****:****"aaa"****,*** *bar****:****"bbb"****\};***

*baz  // undefined*

*//数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名*

***字符串***

***const**\[****a****,*** *b****,*** *c****,*** *d****,*** *e****\]**=****'hello'****;***

*a // "h"*

*b // "e"*

*c // "l"*

*d // "l"*

*e // "o"*

***数值和布尔值***

***let**\{*** *toString****:*** *s****\}**=****123****;***

*s* ***===****Number****.prototype.****toString// true*

***let**\{*** *toString****:*** *s****\}**=**true;***

*s* ***===*** *Boolean****.prototype.****toString// true*

***函数参数的解构***

***function*** *add****(\[****x****,*** *y****\])\{***

* * ***return*** *x* ***+*** *y****;***

***\}***

*add****(\[****1****,****2****\]);****// 3*

## 6.6.  函数参数表达/传参 ##

***默认参数值***

***function*** *noop****()**\{* *return**false**\}***

***function*** *readLineInFile****(****filename****,*** *callback* ***=*** *noop****,*** *complete* ***=*** *noop****)**\{***

***\}***

***后续参数***

我们知道函数的 call 和 apply 在使用上的最大差异便是一个在首参数后传入各个参数，一个是在首参数后传入一个包含所有参数的数组。如果我们在实现某些函数或方法时，也希望实现像 call 一样的使用方法，在 ES2015 之前，我们可能需要这样做：

***function*** *fetchSomethings****()**\{***

* * ***var*** *args* ***=**\[\].****slice****.****apply****(****arguments****)***

*  // ...*

***\}***

***function*** *fetchSomethings****(...****args****)**\{***

*  // ...*

***\}***

要注意的是，...args 后不可再添加

虽然从语言角度看，arguments 和 ...args 是可以同时使用，但有一个特殊情况则不可：arguments 在箭头函数中，会跟随上下文绑定到上层，所以在不确定上下文绑定结果的情况下，尽可能不要再箭头函数中再使用 arguments，而使用 ...args。虽然 ECMA 委员会和各类编译器都无强制性要求用 ...args 代替 arguments，但从实践经验看来，...args 确实可以在绝大部份场景下可以代替 arguments 使用，除非你有很特殊的场景需要使用到 arguments.callee 和 arguments.caller。所以我推荐都使用 ...args 而非 arguments。

PS：在严格模式（Strict Mode）中，arguments.callee 和 arguments.caller  是被禁止使用的。

***注意事项***

默认参数值和后续参数需要遵循顺序原则，否则会出错。

**function(...**args**,** last **=**1**)\{**

// This will go wrong

**\}**

## 6.7.  Set/WeakSet/Map/WeakMap ##

在介绍新的数据结构之前，我们先复习一下在 ES2015 之前，JavaScript 中有哪些基本的数据结构。其中又分为值类型和引用类型，Array 其实是 Object 的一种子类。

l  String 字符串

l  Number 数字（包含整型和浮点型）

l  Boolean 布尔值

l  Object 对象

l  Array 数组

***Set和WeakSet***

我们再来复习下高中数学吧，集不能包含相同的元素，我们有很多需要用到集的场景，如搜索、索引建立等。ECMA 委员会为 ECMAScript 增添了集(Set)和“弱”集(WeakSet)。它们都具有元素唯一性，若添加了已存在的元素，会被自动忽略。

***let*** *s* ***=**new*** *Set****()***

*s****.****add****(****'hello'****).****add****(****'world'****).****add****(****'hello'****)***

*console****.****log****(****s****.****size****)****//=> 2*

*console****.****log****(****s****.****has****(****'hello'****))****//=> true*

WeakSet 在 JavaScript 底层作出调整（在非降级兼容的情况下），检查元素的变量引用情况。如果元素的引用已被全部解除，则该元素就会被删除，以节省内存空间。这意味著无法直接加入数字或者字符串。另外 WeakSet 对元素有严格要求，必须是 Object，当然了，你也可以用 new String('...') 等形式处理元素。

***let*** *weaks* ***=**new*** *WeakSet****()***

*weaks****.****add****(****"hello"****)****//=> Error*

*weaks****.****add****(****3.1415****)****//=> Error*

***let*** *foo* ***=**new****String****(****"bar"****)***

***let*** *pi* ***=**new****Number****(****3.1415****)***

*weaks****.****add****(****foo****)***

*weaks****.****add****(****pi****)***

*weaks****.****has****(****foo****)****//=> true*

*foo* ***=**null***

*weaks****.****has****(****foo****)****//=> false*

***Map和WeakMap***

从数据结构的角度来说，映射Map跟原本的Object非常相似，都是Key/Value的键值对结构。但是 Object 有一个让人非常不爽的限制：key 必须是字符串或数字，而Map则解决了这一问题。

***let*** *map* ***=**new*** *Map****()***

***let*** *object* ***=**\{***  *id****:****1****\}***

*map****.****set****(****object****,****'hello'****)***

*map****.****set****(****'hello'****,****'world'****)***

*map****.****has****(****object****)****//=> true*

*map****.****get****(****object****)****//=> hello*

而 WeakMap 和 WeakSet 很类似，只不过 WeakMap 的键和值都会检查变量引用，只要其一的引用全被解除，该键值对就会被删除。

***let*** *weakm* ***=**new*** *WeakMap****()***

***let*** *keyObject* ***=**\{***  *id****:****1****\}***

***let*** *valObject* ***=**\{***  *score****:****100****\}***

*weakm****.****set****(****keyObject****,*** *valObject****)***

*weakm****.****get****(****keyObject****)****//=> \{ score:100 \}*

*keyObject* ***=**null***

*weakm****.****has****(****keyObject****)****//=> false*

## 6.8.  Class ##

类，作为自 JavaScript 诞生以来最大的痛点之一，终于在 ES2015 中得到了官方的妥协，“实现”了 ECMAScript 中的标准类机制。为什么是带有双引号的呢？因为我们不难发现这样一个现象：

***$ node***

***>*** *class Foo* ***\{\}***

***\[****Function****:*** *Foo****\]***

回想一下在 ES2015 以前的时代中，我们是怎么在 JavaScript 中实现类的？

**function** Foo**()\{\}**

var foo  **=** new Foo**()**

ES6 中的类只是一种语法糖，用于定义原型(Prototype)的。

***定义***

ES2015 所带来的类语法确实与很多C语言家族的语法相似，与JavaScript中的对象字面量不一样的是，类的属性后不能加逗号，而对象字面量则必须要加逗号。

***class*** *Person* ***\{***

* * ***constructor(****name****,*** *gender****,*** *age****)**\{***

*   * ***this.****name* ***=*** *name*

*   * ***this.****gender* ***=*** *gender*

*   * ***this.****age* ***=*** *age*

* * ***\}***

* isAdult****()**\{***

*   * ***return**this.****age* ***>=****18*

* * ***\}***

***\}***

***let*** *me* ***=**new*** *Person****(****'iwillwen'****,****'man'****,****19****)***

*console****.****log****(****me****.****isAdult****())****//=> true*

***继承***

ES2015的类继承总算是为JavaScript类继承之争抛下了一根定海神针

***class*** *Animal* ***\{***

*  yell****()**\{***

*   console****.****log****(****'yell'****)***

* * ***\}***

***\}***

***class*** *Person* ***extends*** *Animal* ***\{***

* * ***constructor(****name****,*** *gender****,*** *age****)**\{***

*   * ***super()****// must call \`super\` before using \`this\` if this class has a superclass*

*   * ***this.****name* ***=*** *name*

*   * ***this.****gender* ***=*** *gender*

*   * ***this.****age* ***=*** *age*

* * ***\}***

* isAdult****()**\{***

*   * ***return**this.****age* ***>=****18*

* * ***\}***

***\}***

***class*** *Man* ***extends*** *Person* ***\{***

* * ***constructor(****name****,*** *age****)**\{***

*   * ***super(****name****,****'man'****,*** *age****)***

* * ***\}***

***\}***

***let*** *me* ***=**new*** *Man****(****'iwillwen'****,****19****)***

*console****.****log****(****me****.****isAdult****())****//=> true*

*me****.****yell****()***

***静态方法***

***class*** *Man* ***\{***

*  // ...*

* * ***static*** *isMan****(****obj****)**\{***

*   * ***return*** *obj* ***instanceof*** *Man*

* * ***\}***

***\}***

***let*** *me* ***=**new*** *Man****()***

*console****.****log****(****Man****.****isMan****(****me****))****//=> true*

遗憾的是，ES2015 的类并不能直接地定义静态成员变量，但若必须实现此类需求，可以用static 加上 get 语句和 set 语句实现。

***class*** *SyncObject* ***\{***

*  // ...*

* * ***static*** *get baseUrl****()**\{***

*   * ***return****'http://example.com/api/sync'*

* * ***\}***

***\}***

***遗憾与期望***

就目前来说，ES2015 的类机制依然很鸡肋：

不支持私有属性（private）

不支持前置属性定义，但可用 get 语句和 set 语句实现

不支持多重继承

没有类似于协议（Protocl）或接口（Interface）等的概念

中肯地说，ES2015的类机制依然有待加强。但总的来说，是值得尝试和讨论的，我们可以像从前一样，不断尝试新的方法，促进 ECMAScript 标准的发展。

## 6.9.  Generator ##

对于一个纯前端的 JavaScript 工程师来说，可能 Generator 并没有什么卵用，但若你曾使用过 Node.js 或者你的前端工程中有大量的异步操作（ES6提供的一种异步编程解决方案），Generator 简直是你的“贤者之石”。

***来龙***

Generator 的设计初衷是为了提供一种能够简便地生成一系列对象的方法，如计算斐波那契数列（Fibonacci Sequence)

***function\**** *fibo****()**\{***

* * ***let*** *a* ***=****1*

* * ***let*** *b* ***=****1*

*  yielda*

*  yieldb*

* * ***while**(true)**\{***

*   * ***let*** *next* ***=*** *a* ***+*** *b*

*     a* ***=*** *b*

*     b* ***=*** *next*

*   yield next*

* * ***\}***

***\}***

***let*** *generator* ***=*** *fibo****()***

***for**(var*** *i* ***=****0****;*** *i* ***<****10****;*** *i****++)***

* console****.****log****(****generator****.****next****().****value****)****//=> 1 1 2 3 58 13 21 34 55*

***Generator函数***

Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。

Generator 函数有多种理解角度。从语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象，返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。

***yield表达式***

其中支持一种新的语法 yield。它的作用与 return 有点相似，但并非退出函数，而是切出生成器运行时。

***function\**** *helloWorldGenerator****()**\{***

*  yield'hello'****;***

*  yield'world'****;***

* * ***return****'ending'****;***

***\}***

***var*** *hw* ***=*** *helloWorldGenerator****();***

*hw****.****next****()***

*// \{ value: 'hello', done: false \}*

*hw****.****next****()***

*// \{ value: 'world', done: false \}*

*hw****.****next****()***

*// \{ value: 'ending', done: true \}*

*hw****.****next****()***

*// \{ value: undefined, done: true \}*

即该函数有三个状态：hello，world 和 return 语句（结束执行），必须调用遍历器对象的next方法，使得指针移向下一个状态。也就是说，每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式（或return语句）为止。换言之，Generator函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。

事实上，Generator 的用法还是很多种，其中最为著名的一种便是使用 Generator 的特性模拟出 ES7 中的 async/await 特性。而其中最为著名的就是 co 和 koa(基于 co 的 Web Framework) 了。

## 6.10.    Promise ##

光是 Promise 作为一个老生常谈的话题，作为异步编程的一种解决方案，目前就有多种标准，而目前最为流行的是[Promises/A+][Promises_A]，而ES2015 中的 Promise 便是基于此。Promise是一种用于解决回调函数无限嵌套的工具（当然，这只是其中一种）。它的作用便是“免去”异步操作的回调函数，保证能通过后续监听而得到返回值，或对错误处理。它能使异步操作变得井然有序，也更好控制。我们以在浏览器中访问一个 API，解析返回的 JSON 数据。

*fetch****(****'http://example.com/api/users/top'****)***

* * ***.****then****(****res* ***=>*** *res****.****json****())***

* * ***.****then****(****data* ***=>**\{***

*     vm****.****data****.****topUsers* ***=*** *data*

* ****\})***

* // Handle the error crash in the chaining processes*

* ****.catch(****err* ***=>*** *console****.****error****(****err****))***

Promise 在设计上具有原子性，即只有两种状态：未开始和结束（无论成功与否都算是结束），这让我们在调用支持 Promise 的异步方法时，逻辑将变得非常简单，这在大规模的软件工程开发中具有良好的健壮性，带有 resolve 和 reject 参数对应的成功和失败。

***function*** *fetchData****()**\{***

* * ***return**new*** *Promise****((****resolve****,*** *reject****)**=>**\{***

*     // ...*

* * ***\})***

***\}***

***弊端***

虽说 Promise确实很优雅，但是这是在所有需要用到的异步方法都支持 Promise 且遵循标准。而且链式 Promise 强制性要求逻辑必须是线性单向的，一旦出现如并行、回溯等情况，Promise 便显得十分累赘。所以在目前的最佳实践中，Promise 会作为一种接口定义方法，而不是逻辑处理工具。

## 6.11.    Symbol ##

ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上**防止属性名的冲突**。这就是ES6 引入Symbol的原因。

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值，即便我们看不到它的区别在哪里。这就意味著，我们可以用它来保证一些数据的安全性。

*console****.****log****(****Symbol****(****'key'****)**==*** *Symbol****(****'key'****))****//=> false*

如果将一个 Symbol 隐藏于一个封闭的作用域内，并作为一个对象中某属性的键，则外层作用域中便无法取得该属性的值，有效保障了某些私有库的代码安全性。Symbol 作为属性名，该属性不会出现在for...in、for...of循环中，也不会被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回。但是，它也不是私有属性，有一个Object.getOwnPropertySymbols方法，可以获取指定对象的所有 Symbol属性名。

***let*** *privateDataStore* ***=**\{***

*  set****(****val****)**\{***

*   * ***let*** *key* ***=*** *Symbol****(****Math****.****random****().****toString****(****32****).****substr****(****2****))***

*   * ***this\[****key****\]**=*** *val*

*   * ***return*** *key*

* * ***\},***

*  get****(****key****)**\{***

*   * ***return**this\[****key****\]***

* * ***\}***

***\}***

***let*** *key* ***=*** *privateDateStore****(****'hello world'****)***

*privateDataStore****\[****key****\]****//=> undefined*

*privateDataStore****.****get****(****key****)****//=> hello world*

**黑科技**

Symbol 除了带给我们数据安全性以外，还带来了一些很神奇的黑科技，Symbol.iterator，除 Symbol 以外，ES2015 还为 JavaScript 带来了 for...of 语句，这个跟原本的 for...in 又有什么区别？

对象的`Symbol.iterator`属性，指向该对象的默认遍历器方法。

***var*** *myIterable* ***=**\{\};***

*myIterable****\[****Symbol****.****iterator****\]**=**function\***()**\{***

*  yield1****;***

*  yield2****;***

*  yield3****;***

***\};***

***\[...****myIterable****\]****// \[1, 2, 3\]*

对象进行for...of循环时，会调用Symbol.iterator方法，返回该对象的默认遍历器

***class*** *Collection* ***\{***

* * ***\*\[****Symbol****.****iterator****\]()**\{***

*   * ***let*** *i* ***=****0****;***

*   * ***while(this\[****i****\]**!==****undefined****)**\{***

*     yield* ***this\[****i****\];***

*     * ***++****i****;***

*   * ***\}***

* * ***\}***

***\}***

***let*** *myCollection* ***=**new*** *Collection****();***

*myCollection****\[****0****\]**=****1****;***

*myCollection****\[****1****\]**=****2****;***

***for(let*** *value* ***of*** *myCollection****)**\{***

* console****.****log****(****value****);***

***\}***

*// 1*

*// 2*

## 6.12.    Proxy ##

Proxy 可以在不入侵目标对象的情况下，对逻辑行为进行拦截和处理。

假设我要对 api 这一对象进行拦截并记录下代码行为，我就可以这样做：

***var*** *obj* ***=**new*** *Proxy****(\{\},**\{***

*  get****:**function**(****target****,*** *key****,*** *receiver****)**\{***

*   console****.****log****(****\`getting $\{key\}!\`****);***

*   * ***return*** *Reflect****.****get****(****target****,*** *key****,*** *receiver****);***

* * ***\},***

*  set****:**function**(****target****,*** *key****,*** *value****,*** *receiver****)**\{***

*   console****.****log****(****\`setting $\{key\}!\`****);***

*   * ***return*** *Reflect****.****set****(****target****,*** *key****,*** *value****,*** *receiver****);***

* * ***\}***

***\});***

*obj****.****count* ***=****1*

*// setting count!*

***++****obj****.****count*

*// getting count!*

*// setting count!*

*//   2*

可惜的是，目前 Proxy 的兼容性很差，哪怕是降级兼容也难以实现。

## 6.13.    原生的模块化 ##

***历史小回顾***

在 JavaScript 的发展历史上，曾出现过多种模块加载库，如 RequireJS、SeaJS、FIS 等，而由它们衍生出来的 JavaScript 模块化标准有 [CommonJS、AMD、CMD ][CommonJS_AMD_CMD]和 UMD 等。其中最为典型的是 Node.js 所遵循的 CommonJS 和 RequireJS 的 AMD。

ES2015 中的模块化机制设计也是相当成熟的。基本上所有的 CommonJS 或是 AMD 代码都可以很快地转换为 ES2015 标准的加载器代码。

***import*** *name* ***from****"module-name"*

***import**\**** *as name* ***from****"module-name"*

***import**\{***  *member* ***\}**from****"module-name"*

***import**\{***  *member as alias* ***\}**from****"module-name"*

***import**\{***  *member1* ***,*** *member2* ***\}**from****"module-name"*

***import**\{***  *member1* ***,*** *member2 as alias2****,**\[...\]**\}**from****"module-name"*

***import*** *defaultMember****,**\{***  *member* ***\[**,**\[...\]**\]**\}**from****"module-name"*

***import*** *defaultMember****,**\**** *as alias* ***from****"module-name"*

***import*** *defaultMember* ***from****"module-name"*

***import****"module-name"*

***全局引入***

***import**\**** *as name* ***from****'module-name'*

***var*** *name* ***=*** *require****(****'module-name'****)****//CommonJS 类似*

***局部引入***，

与 CommonJS 等标准不同ES2015 的模块引入机制支持引入模块的部份暴露接口

***import**\{***  *A****,*** *B****,*** *C* ***\}**from****'module-name'*

***暴露单独接口***

*// module.js*

***export**function*** *method****()**\{*** */\* ... \*/****\}***

*// main.js*

***import*** *M* ***from****'./module'*

*M****.****method****()***

基本的 export 语句可以调用多次，单独使用可暴露一个对象到该模块外

***暴露复合模块***

若需要实现像 CommonJS 中的 module.exports = \{\} 以覆盖整个模块的暴露对象，则需要在 export 语句后加上 default。

*// module.js*

***export**default**\{***

* method1****,***

* method2*

***\}***

*// main.js*

***import*** *M* ***from****'./module'*

*M****.****method1****()***

***降级兼容***

在实际应用中，我们暂时还需要使用 babel 等工具对代码进行降级兼容。庆幸的是，babel 支持 CommonJS、AMD、UMD 等模块化标准的降级兼容，我们可以根据项目的实际情况选择降级目标。

***$ babel**-****m common -d dist****/****common****/*** *src****/***

***$ babel**-****m amd -d dist****/****amd****/*** *src****/***

***$ babel**-****m umd -d dist****/****umd****/*** *src****/***

# 7.   es7透析 #

## 7.1.  async/await ##

Generator Function与普通的 Function在执行方式上有著本质的区别，在某种意义上是无法共同使用的。对于 ES7 的 Async Function 来说，这一点并不存在！它可以以普通函数的执行方式使用，并且有著 Generator Function 的异步优越性，它甚至可以作为事件响应函数使用。

***var*** *fs* ***=*** *require****(****'fs'****);***

***var*** *readFile* ***=**function**(****fileName****)**\{***

* * ***return**new*** *Promise****(function**(****resolve****,*** *reject****)**\{***

*     fs****.****readFile****(****fileName****,**function(****error****,*** *data****)**\{***

*     * ***if**(****error****)*** *reject****(****error****);***

*     resolve****(****data****);***

*   * ***\});***

* * ***\});***

***\};***

***var*** *gen* ***=**function\***()**\{***

* * ***var*** *f1* ***=*** *yield readFile****(****'/etc/fstab'****);***

* * ***var*** *f2* ***=*** *yield readFile****(****'/etc/shells'****);***

* console****.****log****(****f1****.****toString****());***

* console****.****log****(****f2****.****toString****());***

***\};***

*//  async函数就是将 Generator 函数的星号（\*）替换成async，将yield替换成await*

***var*** *asyncReadFile* ***=*** *async* ***function**()**\{***

* * ***var*** *f1* ***=*** *await readFile****(****'/etc/fstab'****);***

* * ***var*** *f2* ***=*** *await readFile****(****'/etc/shells'****);***

* console****.****log****(****f1****.****toString****());***

* console****.****log****(****f2****.****toString****());***

***\};***

async函数对 Generator 函数的改进，体现在以下四点:

1.      内置执行器

Generator函数的执行必须靠执行器，所以才有了co模块，而async函数自带执行器。也就是说，async函数的执行，与普通函数一模一样，只要一行。

2.      更好的语义

async和await，比起星号和yield，语义更清楚了

3.      更广的适用性

co模块约定，yield命令后面只能是 Thunk 函数或 Promise 对象，而async函数的await命令后面，可以是Promise 对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）

4.      返回值是Promise

## 7.2.  Decorators ##

修饰器（Decorator）是一个函数，用来修改类的行为。这是 ES 的一个提案，目前 Babel 转码器已经支持。

定义如下：

l  是一个表达式

l  Decorator 会调用一个对应的函数

l  调用的函数中可以包含target（装饰的目标对象）、name（装饰目标的名称）和 descriptor（描述器）三个参数

l  调用的函数可以返回一个新的描述器以应用到装饰目标对象上

PS：如果你不记得 descriptor 是什么的话，请回顾一下 Object.defineProperty() 方法。

我们在实现一个类的时候，有的属性并不想被 for..in 或 Object.keys() 等方法检索到，那么在 ES5 时代，我们会用到 Object.defineProperty() 方法来实现：

***var*** *obj* ***=**\{***

*  foo****:****1*

***\}***

*Object****.****defineProperty****(****obj****,****'bar'****,**\{***

* enumerable****:**false,***

*  value****:****2*

***\})***

*console****.****log****(****obj****.****bar****)****//=> 2*

***var*** *keys* ***=**\[\]***

***for**(var*** *key* ***in*** *obj****)***

*  keys****.****push****(****key****)***

*console****.****log****(****keys****)****//=> \[ 'foo' \]*

*console****.****log****(****Object****.****keys****(****obj****))****//=> \[ 'foo' \]*

*/\*\**

*\*\*\*ES7中可以这样*

*\*\*/*

***class*** *Obj* ***\{***

* * ***constructor()**\{***

*   * ***this.****foo* ***=****1*

* * ***\}***

* @nonenumerable*

*  getbar****()**\{* *return****2****\}***

***\}***

***function*** *nonenumerable****(****target****,*** *name****,*** *descriptor****)**\{***

* descriptor****.****enumerable* ***=**false***

* * ***return*** *descriptor*

***\}***

***var*** *obj* ***=**new*** *Obj****()***

*console****.****log****(****obj****.****foo****)****//=> 1*

*console****.****log****(****obj****.****bar****)****//=> 2*

*console****.****log****(****Object****.****keys****(****obj****))****//=> \[ 'foo' \]*

***黑科技***

假如我们要实现一个类似于 Koa的CI的框架，且利用Decorator 特性实现 URL 路由，我们可以这样做。

*//  框架内部*

*//  控制器*

***class*** *Controller* ***\{***

*  // ...*

***\}***

***var*** *handlers* ***=**new*** *WeakMap****()***

***var*** *urls* ***=**\{\}***

*//  定义控制器*

*@route****(****'/'****)***

***class*** *HelloController* ***extends*** *Controller* ***\{***

* * ***constructor()**\{***

*   * ***super()***

* *

*   * ***this.****msg* ***=****'World'*

* * ***\}***

*  asyncGET****(****ctx****)**\{***

*     ctx****.****body* ***=****\`Hello $\{this.msg\}\`*

* * ***\}***

***\}***

*// Router Decorator*

***function*** *route****(****url****)**\{***

* * ***return*** *target* ***=>**\{***

*   target****.****url* ***=*** *url*

*   * ***let*** *urlObject* ***=**new****String****(****url****)***

*   urls****\[****url****\]**=*** *urlObject*

* *

*   handlers****.****set****(****urlObject****,*** *target****)***

* * ***\}***

***\}***

*//  路由执行部份*

***function*** *router****(****url****)**\{***

* * ***if**(****urls****\[****url****\])**\{***

*   * ***var*** *handlerClass* ***=*** *handlers****.****get****(****urls****\[****url****\])***

*   * ***return**new*** *handlerClass****()***

* * ***\}***

***\}***

***var*** *handler* ***=*** *router****(****'/'****)***

***if**(****handler****)**\{***

* * ***let*** *context* ***=**\{\}***

* handler****.****GET****(****context****)***

* console****.****log****(****context****.****body****)***

***\}***

最重要的是，同一个修饰对象是可以同时使用多个修饰器的，所以说我们还可以用修饰器实现很多很多有意思的功能。![77942795][]![CommonJS_AMD_CMD][]

# 8.   参与资料 #

*  阮一峰《[ECMAScript6 入门][ECMAScript6]》
 *  [nodejs学习笔记》入门级教程][nodejs]
 *  [nodejs学习笔记》常用组件（webMVC+orm）][nodejs]
 *  [nodejs学习笔记》演示项目示例][nodejs 1]

# 9.   Q&A #

## 9.1. 什么时候不能用箭头函数 ##

[ref][]

[ES-Checker]: http://ruanyf.github.io/es-checker/
[http_babeljs.io]: http://babeljs.io/
[https_github.com_tanepiper_SublimeText-Nodejs]: https://github.com/tanepiper/SublimeText-Nodejs
[Link 1]: https://blog.csdn.net/alex_xfboy/article/details/50468144
[Promises_A]: https://promisesaplus.com/
[CommonJS_AMD_CMD]: /images/20220608/aa417b453d2c468f81433abd97c1b8e2.png
[77942795]: https://blog.csdn.net/alex_xfboy/article/details/77942795
[ECMAScript6]: http://es6.ruanyifeng.com/
[nodejs]: https://blog.csdn.net/alex_xfboy/article/details/77941980
[nodejs 1]: https://blog.csdn.net/alex_xfboy/article/details/77942186
[ref]: https://zhuanlan.zhihu.com/p/26540168?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io