深入JavaScript的this：揭开this取值之谜

2023-06-14 00:36:30

JavaScript 中 this 的全面指南

在 JavaScript 中，this 关键字代表当前执行代码所属的对象。它是一个非常重要的概念，可以帮助我们编写更清晰、更健壮的代码。在本文中，我们将深入探讨 this 关键字，了解它的值如何根据不同环境而变化，以及如何通过绑定来控制它的值。

this 在函数中的值

当一个函数作为普通函数调用时，this 的值为 undefined 。但是，如果函数作为对象的方法调用，this 的值为调用该方法的对象本身。

// 普通函数调用
function sayHello() {
  console.log(this); // undefined
}

sayHello(); // undefined

// 对象方法调用
const person = {
  name: 'John Doe',
  sayHello: function() {
    console.log(this); // { name: 'John Doe' }
  }
};

person.sayHello(); // { name: 'John Doe' }

this 在对象中的值

在对象中，this 的值为该对象本身。这意味着我们可以使用 this 访问对象中的属性和方法。

const person = {
  name: 'John Doe',
  greet() {
    console.log(`Hello, ${this.name}!`); // Hello, John Doe!
  }
};

person.greet();

this 在事件处理程序中的值

在事件处理程序中，this 的值为触发事件的元素。这意味着我们可以使用 this 访问触发事件的元素的属性和方法。

const button = document.querySelector('button');

button.addEventListener('click', function() {
  console.log(this); // <button>...</button>
});

this 的绑定

this 的值可以通过绑定来改变。有四种绑定方式：

隐式绑定： this 的值由函数的调用方式决定。
显式绑定： 使用 bind() 方法显式地将 this 绑定到一个对象。
new 绑定： 在构造函数中，this 的值为新创建的对象。
箭头函数： 箭头函数没有自己的 this ，它继承外层函数的 this 。

this 的常见问题

为什么 ** this 在函数中有时是 ** undefined**？**
- 这是因为当函数作为普通函数调用时，this 的值为 undefined 。
为什么 ** this 在对象的方法中是对象本身？**
- 这是因为 this 在对象的方法中代表着当前执行代码所属的对象。
为什么 ** this 在事件处理程序中是触发事件的元素？**
- 这是因为 this 在事件处理程序中代表着触发事件的元素。
如何改变 ** this 的值？**
- 可以通过绑定来改变 this 的值。
什么时候使用显式绑定？
- 当我们需要在特定上下文中访问 this 时使用显式绑定，例如在回调函数中。