js中什么时候不能使用箭头函数

使用箭头函数的时候需要注意一些使用限制，下面详细讲解什么时候不能使用箭头函数以及注意事项。

不能使用箭头函数的情况

1. 不能作为构造函数

箭头函数不能作为构造函数，也就是不能使用 new 关键字创建对象。因为箭头函数没有自己的 this，也没有 prototype 属性。所以，如果你尝试使用 “箭头函数” 作为构造函数，则会产生异常。

// 箭头函数不能作为构造函数
const Person = (name) => {
  this.name = name; // TypeError：Cannot set property 'name' of undefined
}
const p = new Person('Tom'); // TypeError: Person is not a constructor

2. 无法绑定 `this`

箭头函数的 this 是取决于定义它的代码环境，而不是运行时。在一些场景下，可能不希望使用箭头函数，比如需要动态绑定this或者需要在回调函数中使用 this。所以在这种情况下，不能使用箭头函数。

// 无法绑定this的情况
const obj = {
  name: 'Tom',
  sayHi: () => {
    console.log(`Hello, ${this.name}`); // 在箭头函数中使用this， this指向的是调用该函数的上下文，发现这里的 this 指向的是词法作用域上面的obj，而不是obj自身
  }
}
obj.sayHi(); //Hello, undefined

注意事项

虽然箭头函数有很多简洁明了的语法特性，但仍然需要注意一些细节。

1. 适合处理单行代码的场景

箭头函数的语法特点是可以省略掉很多约束性的代码，它适合处理单行代码的场景。如果需要处理复杂的业务逻辑，或者需要多行代码，就不建议使用箭头函数。

// 使用箭头函数处理单行逻辑
const double = n => n * 2; // 只有一行代码，适合使用箭头函数
console.log(double(2)); // 4

// 箭头函数处理复杂逻辑会导致代码可读性差
const sum = (a, b) => {
  let result = 0;
  for (let i = a; i <= b; i++) {
    result += i;
  }
  return result;
} // 多行代码，不建议使用箭头函数
console.log(sum(1, 100)); // 5050

2. 箭头函数的返回值不需要使用 return 关键字

在箭头函数中，如果只有单个返回值，可以省略掉 return 关键字，直接返回。

// 省略return关键字的写法
const hello = () => 'Hello World';
console.log(hello()); // Hello World

3. 函数体需要使用花括号 `{}` 和 return 关键字的情况

在箭头函数中，如果需要多行代码或者需要返回一个对象，则需要使用花括号和 return 关键字。

// 使用花括号和 return 关键字
const getInfo = () => {
  const name = 'Tom';
  const age = 18;
  return { name, age };
};
console.log(getInfo()); // {name: "Tom", age: 18}