箭头函数是 ES6 引入的一个很好的特性，但很多大厂的核心代码中，箭头函数的使用受到严格的代码规范约束。究竟有什么顾虑？下面我们总结一下。

箭头函数的问题

1. this绑定的差异

箭头函数最大的特点是不绑定自己的 this，而是继承父作用域的 this。这在某些情况下会导致问题：

// 传统函数中的 this 指向调用它的对象
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  console.log(this); // 指向 button 元素
});

// 箭头函数中的 this 继承自父作用域
button.addEventListener('click', () => {
  console.log(this); // 指向父作用域的 this（可能是 window 或其他）
});

2. 在对象方法中的问题

在对象方法中使用箭头函数可能导致无法访问对象实例：

const person = {
 name: 'Alice',
 // 不推荐：this 不会指向 person
 sayHi: () => {
    console.log(`Hi, I'm ${this.name}`); // this.name 是 undefined
  },
 // 推荐：正确绑定 this
 greet() {
    console.log(`Hello, I'm ${this.name}`); // 正常工作
  }
};

3. 原型方法和构造函数

箭头函数不能用作构造函数，也不适合作为原型方法：

// 错误:箭头函数不能用作构造函数
const Person= (name) => {
   this.name = name; //不会绑定到新创建的对象上
}

// 不推荐:原型方法使用箭头函数
class Car {
  constructor(model) {
    this.model = model;
  }
}

Car.prototype.describe = () => {
    console.log(`This car is a ${this.model}`);// this.model 是undefined
};

4. 事件处理器和回调函数

在需要访问调用对象的情况下不适合：

// Vue 组件中的一个例子
export default {
  data() {
    return { message:'Hello' }
  },
  methods: {
    // 不推荐:无法访问组件实例
    handleClick:() => {
      console.log(this.message); // undefined，this 不指向组件实例
    },
    // 推荐:能正确访问组件实例
    handleSubmit() {
       console.log(this.message);//'Hello' 
    } 
  } 
};

5. 当需要arguments 对象时

箭头函数没有自己的arguments对象：

function regular () {
  console.log(arguments);  // 包含所有传入的参数
};

const arrow = () => {
  console.log(arguments); // 未定义或指向父作用域的arguments
};

应该使用箭头函数的情况

1. 简洁的回调函数：特别是当不需要 this 或 arguments 时

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2); // 简洁明了

2. 保持外部 this 上下文：在嵌套函数中需要访问外部 this 时

function Timer() {
  this.seconds =0;
  setInterval(() => {
    this.seconds++; //正确引用 Timer 的 this
  }，1000);
}

3. 函数式编程风格：无副作用的纯函数

const sum = (a, b) => a + b;
const isEven = num => num % 2 === 0;

在选择函数语法时，关键是考虑：

• 是否需要自己的 this 绑定
• 是否需要 arguments 对象
• 函数的用途和上下文