箭头函数

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

箭头函数特点

1. 不需要编写funtion，而是"=>"这种更简单的箭头替代

const fun = function () {
  console.log('普通函数');
};
const fun2 = () => {
  console.log('箭头函数');
};
fun();
fun2();

2. 箭头函数没有自己的this，而是向上查找

更确切的说是箭头函数的外层如果有普通函数，那么箭头函数的this就是这个外层的普通函数的this，箭头函数的外层如果没有普通函数，那么箭头函数的this就是全局变量。

const Person = function () {
  this.age = 0;

  setInterval(function () {
    this.age++; // 由于setInterval属于全局，此时的this属于全局
    console.log(this.age);
  }, 1000);
};
new Person();

// 为了解决上面的问题，可以单独定义一个that来解决
const Person2 = function () {
  this.age = 0;
  const that = this;
  setInterval(function () {
    that.age++; // 由于使用的是that，that指向外层的this，所以正常运行
    console.log(that.age);
  }, 1000);
};
new Person2();

// 有了箭头函数就更简单了，不需要定义that
const Person3 = function () {
  this.age = 0;
  setInterval(() => {
    this.age++; // 由于使用了箭头函数，箭头函数自身没有this，所以指向了外层函数的this
    console.log(this.age);
  }, 1000);
};
new Person3();

3. 箭头函数没有arguments

arguments 是一个对应于传递给函数的参数的类数组对象。
可以看出，因为箭头函数自身没有arguments，所以它的arguments指向了外层函数的arguments。而普通函数有自己的arguments，所以能打印出4。

const func1 = function (a, b, c) {
  const fun2 = function (d, e, f) {
    console.log(arguments[0]);
  };
  fun2(4, 5, 6);
}

func1(1, 2, 3);

const func2 = function (a, b, c) {
  const fun3 = (d, e, f) => {
    console.log(arguments[0]);
  };
  fun3(4, 5, 6);
}

func2(1, 2, 3);

那么如何解决这个问题？

使用剩余参数，一个类数组的入参结构
使用显式参数，也就是入参的参数名

const func1 = function (a, b, c) {
  const fun2 = function (...arg) {
    console.log(arg[0]);
  };
  fun2(4, 5, 6);
}

func1(1, 2, 3);

const func2 = function (a, b, c) {
  const fun3 = (...arg) => {
    console.log(arg[0]);
  };
  fun3(4, 5, 6);
}

func2(1, 2, 3);

const func3 = function (a, b, c) {
  const fun4 = (d, e, f) => {
    console.log(d);
  };
  fun4(4, 5, 6);
}

func3(1, 2, 3);

4. 箭头函数不能使用new进行实例化

箭头函数除了不能new之外，它还没有prototype原型属性。
这是因为箭头函数没有this，就导致无法绑定实例。因为不能实例化成对象，所以就没有原型链了。

const Fun = () => { };
new Fun();
// TypeError: Fun is not a constructor

更高级的箭头函数

相比较传统的函数，箭头函数在部分场景下可以直接省去返回值和花括号，写法更简洁明了。

const list = [1, 2, 3];
const result = list.find((function (v) {
  if (v === 3) {
    return v;
  }
}))
console.log(result); // 3
const result2 = list.find((v) => v === 3);
console.log(result2); // 3