事件处理函数中 `this` 的指向问题 - 智猿学院-IT界的百科全书

各位观众，各位朋友，各位正在埋头苦干的程序员们，晚上好！我是你们的老朋友，一个在代码海洋里摸爬滚打多年的老水手。今天，咱们不聊什么高大上的架构，也不谈什么深奥的算法，咱们就来聊聊一个看似简单，却经常让人栽跟头的小问题：事件处理函数中 this 的指向问题。

这个 this 啊，就像一个性格古怪的演员，在不同的舞台上，扮演着不同的角色。一会儿是指挥全局的将军，一会儿又是跑龙套的小兵。搞不清楚它的身份，你的代码就很容易演成一出闹剧。所以，今天，咱们就来好好扒一扒这个 this 的底细，让它不再神秘莫测！

第一幕：this 的身世之谜

首先，我们要明确一点：this 并不是一个固定不变的值。它指向什么，完全取决于函数是如何被调用的。记住，是如何被调用，而不是在哪里定义的。这就像一场话剧，演员演什么角色，不是看他站在哪个舞台上，而是看剧本怎么安排的。

咱们先来看几种常见的函数调用方式，以及它们对应的 this 指向：

普通函数调用 (默认绑定):

如果一个函数不是作为对象的方法被调用，也不是通过 call、apply 或 bind 显式指定 this，那么它就是以普通函数的形式被调用。在这种情况下，this 指向全局对象。在浏览器中，全局对象通常是 window；在 Node.js 中，全局对象是 global。
```
function sayHello() {
  console.log("Hello, " + this.name);
}

var name = "World"; // 在全局作用域中定义 name
sayHello(); // 输出 "Hello, World" (this 指向 window)

let obj = {
    name: "Object Name",
    greet: function(){
      console.log("Hi, " + this.name)
    }
}

obj.greet(); // Hi, Object Name
```
就像一个在街头巷尾随意吆喝的小贩，没有固定的老板，只能代表整个社会。
对象方法调用 (隐式绑定):

当一个函数作为对象的方法被调用时，this 指向调用该方法的对象。
```
let person = {
  name: "Alice",
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet(); // 输出 "Hello, my name is Alice" (this 指向 person)
```
这就像一个员工，为某个公司工作，this 自然就代表了这家公司。

构造函数调用 (new 绑定):

当使用 new 关键字调用一个函数时，这个函数就成为了一个构造函数。new 关键字会创建一个新的对象，并将 this 绑定到这个新对象上。

function Person(name) {
  this.name = name;
  this.greet = function() {
    console.log("Hello, I'm " + this.name);
  };
}

let alice = new Person("Alice");
alice.greet(); // 输出 "Hello, I'm Alice" (this 指向 alice)

let bob = new Person("Bob");
bob.greet(); // 输出 "Hello, I'm Bob" (this 指向 bob)

这就像一个国王，创建了一个新的王国，this 就代表了这个新生的王国。

显式绑定 (call, apply, bind):

call、apply 和 bind 是 JavaScript 提供的三个强大的工具，它们可以显式地指定函数执行时的 this 值。
- call 和 apply: 它们的作用都是调用函数，并改变函数内部 this 的指向。它们的区别在于，call 接受一系列参数，而 apply 接受一个包含参数的数组。
```
function sayHello(greeting) {
  console.log(greeting + ", " + this.name);
}

let person = { name: "Alice" };

sayHello.call(person, "Hi");   // 输出 "Hi, Alice" (this 指向 person)
sayHello.apply(person, ["Hello"]); // 输出 "Hello, Alice" (this 指向 person)
```
- bind: bind 也用于改变函数内部 this 的指向，但它不会立即调用函数，而是返回一个新的函数，这个新函数的 this 被永久绑定到指定的值。
```
function sayHello() {
  console.log("Hello, " + this.name);
}

let person = { name: "Alice" };

let greetAlice = sayHello.bind(person);
greetAlice(); // 输出 "Hello, Alice" (this 指向 person)
```
这就像一个导演，可以指定演员扮演的角色，让 this 扮演你想要的角色。

第二幕：事件处理函数中的 this 指向

好了，了解了 this 的基本知识，咱们终于可以进入正题了：事件处理函数中的 this 指向。

在浏览器环境中，当一个函数作为事件处理函数被绑定到某个 DOM 元素上时，this 通常指向触发事件的那个 DOM 元素。

<!DOCTYPE html>
<html>
<head>
  <title>Event Handling</title>
</head>
<body>
  <button id="myButton">Click Me</button>

  <script>
    let button = document.getElementById("myButton");

    button.addEventListener("click", function() {
      console.log("Button clicked! This is: ", this); // this 指向 button 元素
      this.textContent = "Clicked!"; // 修改按钮的文本内容
    });
  </script>
</body>
</html>

在这个例子中，当点击按钮时，this 指向 button 元素。因此，我们可以使用 this.textContent 来修改按钮的文本内容。

但是，事情并没有那么简单。在某些情况下，this 的指向可能会发生变化。

1. addEventListener 的第三个参数:

`addEventListener` 接受三个参数：事件类型、事件处理函数和一个可选的布尔值或对象。这个可选的参数可以影响 `this` 的指向。

*   如果第三个参数是 `true`，则使用捕获模式。在这种模式下，`this` 的指向仍然是触发事件的 DOM 元素。
*   如果第三个参数是 `false` (或省略)，则使用冒泡模式。在这种模式下，`this` 的指向仍然是触发事件的 DOM 元素。
*   如果第三个参数是一个对象，可以设置 `capture`、`once` 和 `passive` 属性。`this` 的指向仍然是触发事件的 DOM 元素。

```javascript
button.addEventListener("click", function() {
  console.log("Button clicked! This is: ", this); // this 指向 button 元素
}, false); // 冒泡模式

button.addEventListener("click", function() {
  console.log("Button clicked! This is: ", this); // this 指向 button 元素
}, true); // 捕获模式

button.addEventListener("click", function() {
  console.log("Button clicked! This is: ", this); // this 指向 button 元素
}, { capture: false, once: true }); // 冒泡模式，只执行一次
```

2. 箭头函数:

箭头函数是一个特殊的函数，它没有自己的 `this`。箭头函数会捕获其所在上下文的 `this` 值，并将其作为自己的 `this` 值。

```javascript
let person = {
  name: "Alice",
  greet: function() {
    setTimeout(() => {
      console.log("Hello, my name is " + this.name); // this 指向 person
    }, 1000);
  }
};

person.greet(); // 输出 "Hello, my name is Alice" (1 秒后)
```

在这个例子中，`setTimeout` 内部的箭头函数捕获了 `greet` 函数的 `this` 值，也就是 `person` 对象。

如果使用普通函数，`this` 的指向就会发生变化，因为 `setTimeout` 内部的函数是以普通函数的形式被调用的。

```javascript
let person = {
  name: "Alice",
  greet: function() {
    setTimeout(function() {
      console.log("Hello, my name is " + this.name); // this 指向 window (或 undefined，取决于是否是严格模式)
    }, 1000);
  }
};

person.greet(); // 输出 "Hello, my name is undefined" (1 秒后)
```

为了解决这个问题，可以使用 `bind` 方法来显式地绑定 `this` 值。

```javascript
let person = {
  name: "Alice",
  greet: function() {
    setTimeout(function() {
      console.log("Hello, my name is " + this.name); // this 指向 person
    }.bind(this), 1000);
  }
};

person.greet(); // 输出 "Hello, my name is Alice" (1 秒后)
```

第三幕：this 的优先级

当多种绑定方式同时存在时，this 的指向会遵循一定的优先级。

new 绑定 > 显式绑定 > 隐式绑定 > 默认绑定

也就是说，如果一个函数既作为构造函数被调用，又通过 call 或 apply 显式指定了 this 值，那么 new 绑定的优先级更高，this 仍然指向新创建的对象。

function Person(name) {
  this.name = name;
}

let obj = {};

let alice = new Person.call(obj, "Alice");

console.log(obj.name); // undefined
console.log(alice.name); // Alice

在这个例子中，虽然我们使用 call 方法将 this 绑定到 obj 对象，但是 new 绑定的优先级更高，所以 this 仍然指向新创建的 alice 对象。

第四幕：总结与技巧

好了，经过这么一番折腾，相信大家对事件处理函数中 this 的指向问题已经有了更深入的了解。

为了避免踩坑，这里给大家总结几条实用的技巧：

明确函数是如何被调用的: 这是判断 this 指向的关键。
使用箭头函数: 如果需要保持 this 的指向不变，可以考虑使用箭头函数。
使用 bind 方法: 如果需要显式地指定 this 的值，可以使用 bind 方法。
善用调试工具: 如果对 this 的指向有疑问，可以使用浏览器的调试工具来查看 this 的值。

最后，希望这篇文章能帮助大家更好地理解 this 的奥秘，让你的代码不再因为 this 的问题而崩溃。记住，this 就像一个演员，只要你了解它的剧本，就能让它完美地扮演你想要的角色！

谢谢大家！🎉

表格总结：this 指向一览表

调用方式	`this` 指向	示例
普通函数调用	全局对象 (浏览器中是 `window`，Node.js 中是 `global`)。在严格模式下，`this` 为 `undefined`。	`function sayHello() { console.log(this); } sayHello();`
对象方法调用	调用该方法的对象。	`let obj = { greet: function() { console.log(this); } }; obj.greet();`
构造函数调用	新创建的对象。	`function Person() { console.log(this); } let person = new Person();`
`call` / `apply`	显式指定的对象。	`function sayHello() { console.log(this); } let obj = {}; sayHello.call(obj);`
`bind`	永久绑定到指定对象的新函数。	`function sayHello() { console.log(this); } let obj = {}; let boundSayHello = sayHello.bind(obj); boundSayHello();`
事件处理函数	触发事件的 DOM 元素 (通常)。	`<button onclick="console.log(this)">Click Me</button>` `<button id="myButton">Click Me</button> <script>document.getElementById("myButton").addEventListener("click", function() { console.log(this); });</script>`
箭头函数	捕获其所在上下文的 `this` 值 (词法作用域)。	`let obj = { greet: function() { setTimeout(() => { console.log(this); }, 1000); } }; obj.greet();`

最后，送给大家一句格言：

理解 this，才能掌控 JavaScript！ 😉

发表回复 取消回复

发表回复取消回复