zh-CN.md (mbeaudru#72)

* I want traslate this file

* translation for Arrow function

* translation for Arrow function

* Revise translation of Arrow function

Signed-off-by: guodan1 <[email protected]>

Author: familyuu

translations/zh-CN.md

@@ -41,11 +41,11 @@
       - [详述](#详述)
       - [延伸资料](#延伸资料)
     + [箭头函数](#箭头函数)
-      - [简述](#简述)
-      - [详述](#详述)
+      - [简述](#简述-1)
+      - [详述](#详述-1)
           * [简洁性](#简洁性)
           * [*this* 关键字](#this-关键字)
-      - [延伸资料](#延伸资料)
+      - [相关资料](#相关资料)
 
 ## 正文
 
@@ -214,3 +214,160 @@ person = ["Nick"] // 提示错误，因为用 const 声明的变量不能被重
 
 - [How let and const are scoped in JavaScript - WesBos](http://wesbos.com/javascript-scoping/)
 - [Temporal Dead Zone (TDZ) Demystified](http://jsrocks.org/2015/01/temporal-dead-zone-tdz-demystified)
+
+### <a name="arrow_func_concept"></a> 箭头函数
+
+ES6 JS 的最新版本已经介绍了*箭头函数*， 箭头函数是以另一种方式声明和使用函数。以下是箭头函数带来的一些好处：
+
+- 更加简洁
+- 从上下文获取*this*
+- 隐式的返回方式
+
+#### 简述
+
+- 简洁性和隐式的返回方式
+
+```js
+function double(x) { return x * 2; } // 传统函数声明方式
+console.log(double(2)) // 4
+```
+
+```js
+const double = x => x * 2; // 同样的函数，使用具有隐式返回方式的箭头函数来表示
+console.log(double(2)) // 4
+```
+- *this* 关键字
+
+在箭头函数中， *this*的值就等于函数所处的封闭的可执行上下文的*this*。简单来说，就是在箭头函数中，当你调用一个位于函数体内部的函数时，在内部函数中，你不需要使用"that = this" 这样的声明语句。
+
+```js
+function myFunc() {
+  this.myVar = 0;
+  setTimeout(() => {
+    this.myVar++;
+    console.log(this.myVar) // 1
+  }, 0);
+}
+```
+
+#### 详述
+
+##### 简洁性
+
+箭头函数从很多方面都比传统的函数简洁。案例如下：
+
+- 隐式返回 VS 显式返回
+
+**显式返回** 指的是函数的返回语句使用了return 关键字
+
+```js
+  function double(x) {
+    return x * 2; // 使用了*return*关键字，显式返回 x * 2
+  }
+```
+
+传统函数总是伴随着显式返回。使用箭头函数，你可以使用*隐式返回*，即不需要在函数体内使用return关键字就可以返回值。
+
+隐式返回需要将所需代码写在一条语句中。
+
+```js
+  const double = (x) => {
+    return x * 2; // 显式返回
+  }
+```
+
+鉴于只返回单值，我们可以使用隐式返回。
+
+```js
+  const double = (x) => x * 2;
+```
+
+为实现隐式返回，我们只需要 **移除花括号** 和 **return** 关键字。之所以被称为*隐式*返回，是因为*return*关键字不存在的情况下，函数仍可返回 ```x * 2```。
+
+> **注意:** 如果你的函数不是返回一个单值（伴有*连带值*），那么既不可以使用显式返回也不可以使用隐式返回。
+
+除此之外， 如果你想隐式返回一个*object* 则必须使用圆括号对其修饰， 
+
+```js
+const getPerson = () => ({ name: "Nick", age: 24 })
+console.log(getPerson()) // { name: "Nick", age: 24 } -- 箭头函数返回的对象
+```
+
+- 函数只有一个参数
+
+如果你的箭头函数只有一个参数，你可以省略修饰参数的圆括号，重新观察上面的代码：
+
+```js
+  const double = (x) => x * 2; // 箭头函数只有一个参数
+```
+
+参数外面的圆括号可以省略:
+
+```js
+  const double = x => x * 2; // 箭头函数只有一个参数
+```
+
+- 函数无参数
+
+当箭头函数无参数时，必须使用圆括号，否则会出现语法错误.
+
+```js
+  () => { // 必须提供圆括号
+    const x = 2;
+    return x;
+  }
+```
+
+```js
+  => { // 无圆括号，错误!
+    const x = 2;
+    return x;
+  }
+```
+
+##### *this* 关键字
+
+要理解箭头函数中this的微妙之处，你必须首先了解JavaScript中[this](#this_def) 的行为。
+
+在箭头函数中， *this*的值就等于函数所处的封闭可执行上下文的*this*。这句话的意思就是箭头函数不创建一个新的*this*， 而是从其所处的上下文环境中获取。
+
+没有箭头函数，如果你想要从*this*访问函数内部的函数中的一个变量，你必须使用*that = this*或者*self = this*这样的技巧。
+
+例如, 使用位于myFunc内部的函数setTimeout:
+
+```js
+function myFunc() {
+  this.myVar = 0;
+  var that = this; // that = this 
+  setTimeout(
+    function() { // 在函数的内部创建一个新的
+      that.myVar++;
+      console.log(that.myVar) // 1
+
+      console.log(this.myVar) // 未定义 -- 请参照上面的函数this定义
+    },
+    0
+  );
+}
+```
+
+但是一旦使用箭头函数, *this* 将从包含这个箭头函数的上下文中获取:
+
+```js
+function myFunc() {
+  this.myVar = 0;
+  setTimeout(
+    () => { // 从上下文中获取this, 在这里就是 myFunc
+      this.myVar++;
+      console.log(this.myVar) // 1
+    },
+    0
+  );
+}
+```
+
+#### 相关资料
+
+- [Arrow functions introduction - WesBos](http://wesbos.com/arrow-functions/)
+- [JavaScript arrow function - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
+- [Arrow function and lexical *this*](https://hackernoon.com/javascript-es6-arrow-functions-and-lexical-this-f2a3e2a5e8c4)