箭头函数不绑定this，需确保定义时外层this已指向目标实例；推荐用类字段语法（如handleClick = () => { this.count++; }）并直接传入addEventListener，避免() => this.handleClick()等错误写法。

箭头函数本身不绑定 this，它只是沿词法作用域向上查找外层的 this 值。所以在事件监听器中用它，关键不是“靠它自动修复上下文”，而是确保定义箭头函数时，外层作用域的 this 已经是你想要的对象（比如类实例）。否则容易误以为能访问触发元素，结果 this 指向 window 或 undefined。

在类中保持对实例的引用

类组件里最常见需求是点击后更新实例状态或调用实例方法。这时推荐用类字段语法声明箭头函数，每个实例独有一份，this 绑定牢固：

• handleClick = () => { this.count++; console.log(this.count); };
• 然后直接传入：button.addEventListener('click', this.handleClick);
• 避免写成 button.addEventListener('click', () => this.handleClick());——如果 handleClick 是普通方法且没绑定，内部 this 依然会丢失

传递参数时避免立即执行

给事件处理函数传参时，不能写 addEventListener('click', fn(arg))，否则函数当场执行。正确做法是用箭头函数包裹调用逻辑，形成闭包捕获变量：

• btn.addEventListener('click', () => toggleDisplay(course1Info));
• 参数 course1Info 在定义时就被捕获，点击时才真正执行 toggleDisplay
• 比 bind(null, course1Info) 更直观，也无需考虑 this 绑定问题

需要访问触发元素时别依赖 this

原生事件监听中，this 默认指向绑定的元素（即 event.currentTarget），但箭头函数不提供这个行为。所以想改按钮样式、读取输入值，应直接用事件对象：

• input.addEventListener('input', (e) => console.log(e.target.value));
• btn.addEventListener('click', (e) => e.currentTarget.classList.add('active'));
• e.currentTarget 总是等于你绑定监听器的那个元素，语义明确又可靠

哪些情况不该用箭头函数当监听器

如果回调里既要访问类实例，又要自然获得触发元素作为 this，箭头函数反而添乱。这时更适合普通函数 + 显式绑定：

• 构造函数中提前绑定：this.handleClick = this.handleClick.bind(this);
• 或直接使用普通函数，在回调内通过 e.currentTarget 获取元素，用 this 访问实例
• 避免在 for 循环里为多个元素分别写 () => handler(i)——容易闭包陷阱，改用事件委托更稳妥