在前端开发中，我们经常需要编写事件处理程序来响应用户的操作。但是，在处理程序代码中可能会遇到一个普遍的问题：如何将正确的 this 上下文传递给该处理程序函数？
问题描述
通常情况下，当我们将一个函数作为事件处理程序传递给 DOM 元素时，该函数将在全局上下文（window）中执行。因此，在该函数中使用 this 关键字将返回 window 对象，而不是我们期望的元素对象。
例如，考虑以下代码：
<button id="myButton">点击我</button>
const button = document.querySelector('#myButton');
// 错误的事件处理程序定义方式
button.addEventListener('click', function() {
console.log(this); // 输出：Window {...}
});在上面的代码中，当我们点击按钮时，事件处理程序将在全局上下文中进行执行，因此 this 指向了 window 对象，而不是按钮元素对象。
解决方案
有多种方法可以解决将 this 上下文传递给事件处理程序的问题。下面介绍其中两种最常用的方法。
1. 使用箭头函数
箭头函数是 ES6 中引入的一种新的函数定义方式，它具有诸多特性，其中之一就是没有自己的 this 上下文。因此，在箭头函数中使用 this 关键字时，它会继承外部函数的 this 上下文。
例如，以下代码将事件处理程序定义为箭头函数：
button.addEventListener('click', () => {
console.log(this); // 输出：按钮元素对象
});在上面的代码中，在箭头函数中使用 this 关键字时，它会自动继承外部函数的 this 上下文（即按钮元素对象）。
2. 使用 bind 方法
另一种常见的方法是通过调用函数的 bind 方法来显式地设置其 this 上下文。bind 方法返回一个新的函数，该函数的 this 值被强制绑定到指定的对象。
例如，以下代码将事件处理程序定义为使用 bind 方法的普通函数：
button.addEventListener('click', function() {
console.log(this); // 输出：按钮元素对象
}.bind(this));在上面的代码中，通过调用 bind(this) 方法，我们将事件处理程序的 this 上下文绑定到外部函数的 this 上下文（即按钮元素对象）。
示例代码
<button id="myButton">点击我</button>
-- -------------------- ---- ------- ----- ------ - ------------------------------------ -- -- -------- -------------------------------- -- -- - ------------------ -- --------- --- -- -- ---- ---- -- -------------------------------- ---------- - ------------------ -- --------- --------------
结论
正确地将 this 上下文传递给事件处理程序是编写高质量前端代码的关键之一。虽然有多种方法可以解决这个问题，但使用箭头函数和 bind 方法是最为常见和推荐的方法。在编写事件处理程序时，请选择适合您的代码风格和需求的方法，并始终注意您的代码是否正确地使用了 this 上下文。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25646