箭头函数及其相关知识点详解

定义

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

语法

基础语法：

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
//相当于：(param1, param2, …, paramN) =>{ return expression; }
​
// 当只有一个参数时，圆括号是可选的：
(singleParam) => { statements }
singleParam => { statements }
​
// 没有参数的函数应该写成一对圆括号。
() => { statements }

高级语法（和普通函数相同，可以对传入的参数进行一些定义）：

//加括号的函数体返回对象字面量表达式：
params => ({foo: bar})
//支持剩余参数和默认参数
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => {
statements }
//同样支持参数列表解构
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6

箭头函数产生的原因：

• 函数更短更简洁；从箭头函数的基本语法上可以看出来；

• 解决特定应用场景下的this指向问题,箭头函数中的this会继承自己的作用域链的上一 this；

在箭头函数出现之前，每一个新函数会根据函数自身如何调用来定义这一个函数的值，但正式this的这种特性，导致我们在实现一些功能时不太方便，例如下面这一案例，创建通过构造函数，创建Person对象，this指向Person对象，但是在计时器部分this.age却同上面的this.age的指向不一致，在计时器中输出this.age的话,会输出underfinded：

function Person() {
  // Person() 构造函数定义 `this`作为它自己的实例。
  this.age = 0;
  setInterval(function growUp() {
    // 在非严格模式，growUp() 函数定义 `this`作为全局对象，
    // 与在 Person() 构造函数中定义的 `this`并不相同。
    this.age++;
  }, 1000);
}
var p = new Person();

使用箭头函数后的案例：箭头函数中的this会自动继承它上以作用域中的this,解决原先的this指向错误的问题，更加方便编程；

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

这是笔者箭头函数应用的主要方面，对于arguements后期会进行补充；

补充知识点：

函数声明与函数表达式的不同：

• function声明函数 分号是用来分隔可执行JavaScript语句，由于函数声明不是一个可执行语句，所以不以分号结束。

• 函数表达式 例如

var x=function(a,b){return a+b};
//以上函数实际上是一个 匿名函数 (函数没有名称)。同时，函数存储在变量中，
//不需要函数名称，通常通过变量名来调用,函数表达式是一个可执行语句，所以以分号结束。

不同之处在于：

是否对函数进行了提升，声明函数会对会对函数进行提升，我们在声明函数前、声明后调用函数都可以。而使用函数表达式创建的函数只能在其后进行调用，不能再之前调用；