详解JavaScript什么情况下不建议使用箭头函数

下面是详解“详解JavaScript什么情况下不建议使用箭头函数”的攻略。

为什么会使用箭头函数

在JavaScript中，箭头函数是ES6引入的一种语法糖，相较于传统的函数声明方式，更加简洁明了。下面是一个简单的例子：

// 传统的函数声明方式
function sum(a, b) {
  return a + b;
}

// 使用箭头函数的方式
const sum = (a, b) => { return a + b }

什么情况下不建议使用箭头函数

1.需使用this

箭头函数中的this指向外层的函数，而不是当前函数的调用对象，这也是它相较于传统的函数声明方式的巨大区别之一。在一些特殊情况下，我们需要使用this来指向当前执行函数的调用对象。而在箭头函数中，this会被固定在箭头函数定义的函数作用域内，不能改变其指向。下面是一个示例：

// 传统函数声明方式
function Person(name) {
  this.name = name
  this.sayName = function() {
    console.log(this.name)
  }
}

const p1 = new Person('Tom')
p1.sayName() // 输出 Tom

// 使用箭头函数，会输出 undefined
const Person = (name) => {
  this.name = name
  this.sayName = () => {
    console.log(this.name)
  }
}

const p2 = new Person('Jerry')
p2.sayName()

从上面的代码中可以看出，在传统函数定义方式中，this指向创建的对象，并正确的输出了name，而使用箭头函数的方式，this指向了当前函数作用域，输出了undefined。

2. 需要调用arguments对象

在箭头函数中，arguments对象指向的是外层函数作用域的arguments，而不是当前函数的arguments，所以在使用箭头函数时无法使用arguments对象。下面是一个示例：

// 传统函数声明方式
function foo() {
  console.log(arguments[0])
}

foo('a') // 输出 a

// 使用箭头函数的方式会抛出 ReferenceError，因为arguments不存在
const bar = () => {
  console.log(arguments[0])
}

bar('b')

从上面的代码可以看出，使用箭头函数无法访问到当前函数的arguments对象，而使用传统函数声明方式便能够正确的输出相应参数。

结语

综上所述，箭头函数虽然在一些特定场景下表现优异，但也存在一些不足之处。在需要this和arguments对象的场景下，最好不要使用箭头函数。