JavaScript | 箭头函数

如果说函数是 JavaScript 中的一等公民，那么箭头函数，就是一等公民中的佼佼者。

介绍

在函数一章中，我们已经简单地介绍了箭头函数的语法。简单回顾一下：

// 普通函数
function func(str) {
  return 'Ceynri: ' + str;
}
// 匿名函数（用变量保存）
let func = function (str) {
  return 'Ceynri: ' + str;
};
// 使用箭头函数实现类似效果
let func = (str) => {
  return 'Ceynri: ' + str;
};
// 单参数，可以省略圆括号
let func = (str) => {
  return 'Ceynri: ' + str;
};
// 单句语句，可以省略花括号
// 省略花括号时，会默认return该表达式的结果
let func = (str) => 'Ceynri: ' + str;

可以看到，箭头函数非常简洁优雅，看起来是个很甜的“语法糖”——

但是，箭头函数实际上并不算是“语法糖”，因为它和普通函数、匿名函数都有不同的地方，在某些情形下非常有必要知道这些差别。

我们在Objects 对象基础（2）中的回调函数中的 this部分中已经详细讲解了箭头函数在this方面与其他函数的不同。在这里，我们再对一些其他的不同点进行汇总。

与普通函数的区别

• 箭头函数不绑定this，在函数内调用this，会取到其所在上下文的this值

  this.num = '?';
  
  let obj = {
    num: 42,
    getFalseNum: () => {
      return this.num;
    },
    getTrueNum: function () {
      return this.num;
    },
  };
  console.log(obj.getFalseNum()); // ?
  console.log(obj.getTrueNum()); // 42
  

• 无法作为构造函数，使用 new 创建实例

  let Constructor = () => {
    console.log('?');
  };
  let fc = new Constructor();
  // Uncaught TypeError: Constructor is not a constructor
  

• 不绑定arguments（有需要的话可以用剩余参数语法来解决这个问题）

  let accumulator = (...rest) => {
    let sum = 0;
    for (let num of rest) {
      sum += num;
    }
    return sum;
  };
  console.log(accumulator(1, 2, 3, 4)); // 10
  

• 对其使用bind()、call()或apply()，并不会对this产生影响

• 没有prototype原型对象

• 不能当做Generator函数，不能使用yield关键字（不过，可以使用 async/wait）

• 没有super，没有new.target

与匿名函数的区别

• 匿名函数中的this指向undefined或者window

• 用匿名函数给变量或属性赋值，就变为了一般的函数，有着普通函数的this行为

• 普通函数有的，匿名函数一般也有