在前端开发中，“本”（this）是一个非常重要的概念。它代表了当前执行上下文中的对象，也就是函数被调用时的上下文环境。在 JavaScript 中，事件处理程序也是使用 this 关键字来引用其所属的 DOM 元素。
this 的指向
在 JavaScript 中，this 的指向取决于函数调用的方式和位置。一般来说，this 可以指向以下几种对象：
- 全局对象（Global Object）
- 调用当前函数的对象（Object Calling the Function）
- 使用 new 操作符创建的实例对象（Instance Created by the New Operator）
- apply、call 或 bind 方法显式绑定的对象（Object Explicitly Bound to Apply, Call, or Bind Methods）
全局对象
当函数不作为对象的方法调用时，this 指向全局对象。在浏览器环境中，全局对象是 window 对象。
function myFunction() {
console.log(this); // 输出 global object Window
}
myFunction();调用当前函数的对象
当函数作为对象的方法调用时，this 指向调用该方法的对象。
const obj = {
name: "John",
sayName() {
console.log(this.name);
}
};
obj.sayName(); // 输出 John使用 new 操作符创建的实例对象
当使用 new 操作符创建一个对象实例时，this 指向该对象实例。
function Person(name) {
this.name = name;
}
const john = new Person("John");
console.log(john.name); // 输出 John显式绑定的对象
使用 apply、call 或 bind 方法可以显式地将 this 绑定到指定的对象上。
-- -------------------- ---- ------- -------- --------- - ----------------------- - ----- ---- - - ----- ------ -- ----- ---- - - ----- ------ -- ------------------- -- -- ---- -------------------- -- -- ---- ----- ----------- - ------------------- -------------- -- -- ----
事件处理程序中的 this
在 JavaScript 中，通过给 DOM 元素添加事件处理程序来响应用户的交互行为。这些事件处理程序也使用 this 来引用其所属的 DOM 元素。
<button id="myButton">Click Me</button>
<script>
const button = document.getElementById("myButton");
button.addEventListener("click", function() {
console.log(this); // 输出 <button id="myButton">Click Me</button>
});
</script>在上面的例子中，当按钮被单击时，事件处理程序中的 this 指向按钮元素本身。
总结
本文介绍了 JavaScript 中 this 关键字的用法和指向。掌握 this 的指向对于理解函数的执行上下文和事件处理程序非常重要。建议开发者多写一些相关的代码来加深理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11404
