箭头函数

箭头函数是ES6（ECMAScript 2015）引入的一种新的函数声明方式，它提供了一种更简洁的语法形式。

和传统函数比较：

// 传统函数
function add(x, y) {
  return x + y;
}

// 箭头函数
//括号中为参数，箭头后为方法体
const add = (x, y) => x + y;

如果箭头函数体内只包含一个表达式，它将自动将该表达式的值作为函数的返回值。
如果箭头函数体内包含了多个语句，就需要使用花括号 {} 包裹起来，并显式地使用 return 语句来返回值。

没有自己的this： 箭头函数不会创建自己的this，而是会继承外部作用域的this。这意味着箭头函数内部的this和外部的this是一致的。

箭头函数有几个使用注意点：

函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用rest参数代替。
不可以使用yield命令，因此箭头函数不能用作Generator函数。

普通函数的上下文是调用使用才能确定的，并且规则很多，但是箭头函数的上下文是定义时候确定的。
箭头函数的上下文依靠的是父作用域函数的上下文，获取箭头函数的上下文this就是，就需要获取定义时候所处的普通函数的作用域，该普通函数的上下文就是箭头函数的上下文，如果所处环境没有普通函数上下文就是window.

function TraditionalFunction() {
  this.value = 1;
//setTimeout是由js引擎进行管理，他的this为window对象
  // 传统函数中的this
  setTimeout(function () {
    this.value++;
    console.log(this.value); // undefined，因为this指向了全局对象
  }, 1000);
}

function ArrowFunction() {
  this.value = 1;

  // 箭头函数中的this，继承了外部作用域的this
  setTimeout(() => {
    this.value++;
    console.log(this.value); // 2，this指向了ArrowFunction的实例
  }, 1000);
}

如果需要多个语句，可以使用花括号{}包裹起来。

// 单一表达式的箭头函数
const double = (x) => x * 2;

// 多语句的箭头函数，需要使用花括号
const multiply = (x, y) => {
  const result = x * y;
  return result;
};