箭头函数和普通函数的区别

「这是我参与2022首次更文挑战的第17天，活动详情查看：2022首次更文挑战」。

前言

箭头函数时ES6中新增的API，相比普通的函数语法上更简洁，除了书写语法上的不同，箭头函数和普通函数主要还有以下几点区别

1. this 的指向
2. 没有 arguments
3. 不能作为构造函数使用
4. 不能用做 Generator 函数

基本语法

• 箭头函数的目的是让代码更简洁，不需要 function 关键字，如果函数体中只有一条语句，也不需要用一对 {} 将语句包裹，并且不用像普通函数一样需要显式的 return 返回值

var f = v => v

// 等同于
var f = function (v) {
  return v
}

• 但如果有多条语句，则需要用一对 {} 将语句包裹，并且如果有返回值需要用到 return

var sum = (num1, num2) => {
  var total = num1 + num2
  return total
}

其他语法详见 阮一峰 ECMAScript 6 入门

与普通函数区别

this 的指向

箭头函数中没有自己的 this 对象，this 总是指向外层

var a = 123
var obj = {
    a: 'i am from obj',
    fn: () => console.log(this.a),
}

obj.fn() // 123

• 也不能通过 call apply bind 修改 this 的指向

var age = 18
var arr = () => console.log("I am " + this.age + ' years old')
var obj = {
    age: '28'
}
arr.call(obj) // I am 18 years old

Javascript中this的指向问题

没有 arguments

• 在箭头函数中使用 arguments 会报错

var f = () => console.log(arguments)

f(); // arguments is not defined

• 如果在定义箭头函数的时候不指定参数，在执行箭头函数的时候又想拿到传入的参数，可以使用 ES6 的 rest 参数

var f = (...args) => console.log(args)

f(1, 2, 3, 4) // [1, 2, 3, 4]

不能作为构造函数使用

• 如果用 new 关键字调用箭头函数会报错

var F = () => {}

var f = new F() // F is not a constructor

• 因为箭头函数设计之初，就是为了设计一种更简短的函数并且不绑定 this，因此箭头函数没有 [[Construct]] 这个方法，就不能被用作构造函数

不能用做 Generator 函数

Generator 函数的语法

• 在箭头函数内部使用 yield 会报错