箭头函数：被大厂拉黑的 ES6 特性

一、技术债务的隐形陷阱

1.this 绑定灾难

-箭头函数继承父作用域的 this，导致事件处理器、对象方法中逻辑崩溃

// 错误示范：按钮点击事件中 this 指向错误
button.addEventListener('click', () => {
  console.log(this); // 输出 window 而非 DOM 元素:ml-citation{ref="6" data="citationList"}
});

2.原型方法污染

-类中箭头函数会为每个实例创建独立函数，破坏原型链复用机制

class User {
  constructor(name) {
    this.name = name;
    this.greet = () => console.log(`Hi, ${this.name}`); // ❌ 实例污染
    this.sayHello = function() { /* ✅ 正确绑定 */ };
  }
}

二、被大厂限制使用的原因

1.不能作为构造函数 ：箭头函数没有自己的 this ，无法通过 new 关键字实例化对象

2. 事件处理器中不适用 ：在需要动态 this （指向触发事件的元素）的场景，箭头函数会导致 this 指向错误
   3.缺少arguments对象 ：箭头函数中没有 arguments 对象，如需可变参数需使用剩余参数 ...args
3. 无法改变this指向 ：不能通过 call 、 apply 、 bind 方法改变箭头函数的 this 指向
4. 不支持Generator函数 ：箭头函数不能使用 yield 命令，无法作为Generator函数

替代方案与最佳实践

1.严格模式下的函数声明

// 推荐：显式绑定 this
const safeCallback = function() {
  console.log(this.value); // 明确上下文
}.bind(this);

2.现代语法替代方案
-使用 class 方法而非箭头函数
-通过 Object.defineProperty 实现属性代理