JavaScript 箭头函数

箭头函数释义

箭头函数表达式 (Arrow function expressions)语法比函数表达式更简洁，引用MDN上的定义：

箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

引入箭头函数有两个方面的作用：更简短的函数并且不绑定this。

箭头函数使用

基础语法：
(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) =>{ return expression; }

• 左边参数右边函数语句：(param) => { ... }；
• 左边无参数时 () 不可以省略：() =>{ ... }；
• 左边参数只有一个时，括号 () 可以省略：param => { ... }；
• 右边语句只有一个时，括号 {} 和 return 可以省略：(param) => param + 1等同于：function(param){ return param + 1; }；
• 右边语句有多个时，括号 {} 和 return 不可以省略；
• 右侧用一条语句返回对象时，{} 外层加 () ：param => ({ paramName: param })；

箭头函数与普通函数

举个例子

let fuc = param => param + 1;
// 相当于
function fuc(param){
	return param + 1;
}

箭头函数与this

箭头函数只会从自己的作用域链的上一层继承 this，不创建自己的this。
用匿名函数对比示例，代码用浏览器调试：

• 预期效果：在person实例化的时候，在定时器作用下让age自加。

使用匿名函数

function Person(){
  this.age = 0;
  this.timer = setInterval(function(){
    this.age++; // this 指向 window 或 undefined
  }, 1000);
}
var person = new Person();

person.age 一直就是 0
age 值为 NaN，因为匿名函数默认this指向 global（浏览器即window），this.age会自动生成一个全局的age，在person实例化的时候当于在定时器作用下一直在用全局变量的age自加，值为 undefined+undefined（NaN+undefined）

是用箭头函数
传递给setInterval的函数内的this与封闭函数中的this值相同：

function Person(){
  this.age = 0;
  this.timer = setInterval(() => {
    this.age++; // |this| 正确地指向 p 实例
  }, 1000);
}
var person = new Person();

person.age 在沿着时间自加，直到调用 clearInterval(person.timer) 停下定时器为止
age 报错 Uncaught ReferenceError: age is not defined ，age在全局中未定义