[译] JavaScript中的“this”是什么

在JavaScript中，“this”关键字是一个特殊的变量，它指向对象的当前执行上下文。它用来访问当前对象的属性与方法。在不同的环境下，this 的值可以有不同的含义：在全局环境下，它指向全局对象；在对象方法内部，它指向调用方法的对象；在事件处理中，它指向触发事件的元素；在严格模式（'use strict'）下，未绑定的函数中的 this 值是 undefined；箭头函数中的 this 继承自它外围作用域的 this 值。this 的灵活性让JavaScript函数的调用更加动态，但也可能导致不明确的情境。

一、全局上下文下的 this

在JavaScript代码运行时，默认情况下是在全局执行上下文中。在这种情况下，this 指代全局对象。在浏览器中，全局对象是 window；在Node.js中，是 global 对象。尽管这看似简单，但在全局范围内使用 this 可能会导致代码结构的混乱，并可能引起命名空间冲突。

全局上下文中的 this 使用示例通常包括为全局对象添加新的属性或方法。这种情况下，通过 this.属性名 可以定义全局变量，而不是使用 var、let 或 const。然而，这种使用方式应尽量避免，因为它破坏了变量作用域，并使得代码难以维护和理解。

二、函数上下文中的 this

在函数内部，this 的值依赖于其被如何调用。若一个函数作为某个对象的方法被调用，this 将指向该对象。但是如果一个函数被直接调用，即作为一个不属于任何对象的单独函数执行，this 通常会指向全局对象，或者在严格模式下，它的值为 undefined。

在构造器函数使用 new 关键字创建新对象时，this 指向新创建的对象。这是面向对象编程中 this 使用的一种常见场景，用于在类的构造器或方法中引用实例属性和方法。

三、对象方法中的 this

当函数作为对象的方法被调用时，this 指向该方法所属的对象。这允许方法访问和操作调用它的对象的属性。这个特性使得方法可以更具模块性和可重用性，而不必担心它们将作用于哪个具体的对象实例。

对象方法中的 this 可用于实现各种模式，如模块模式，其中用对象封装一组相关的属性和方法，以保留内部状态和提供公共接口。

四、事件处理器中的 this

在事件处理函数中，this 通常指向触发事件的DOM元素。这提供了一个简便的方式来访问事件的目标元素，并在处理函数内部与之交互。它使得依据元素的事件（如点击或键盘输入）动态修改其属性成为可能。

事件处理函数中的 this 跟踪用户与网页的交互，允许编写响应用户输入的动态代码。

五、箭头函数中的 this

箭头函数不绑定自己的 this，它们捕获其创造时所处的上下文中的 this 值。因此，在箭头函数内部，this 引用的是定义时外围作用域中的值。这种行为处理异步代码时非常有用，例如在回调函数和Promise中，它便于保持 this 的一致性。

箭头函数中的 this 解决了传统函数可能带来的 this 值不正确问题，特别是在回调中。它简化了闭包内 this 的使用，使得代码更加简洁和易懂。

六、绑定 this 的方法

JavaScript提供了 bind、call 和 apply 方法来明确地设定函数内的 this 值。bind 方法返回一个新的函数，永久绑定了特定的 this 值和可选的参数。而 call 和 apply 都是立即执行函数，并允许为函数调用传递一个 this 值和参数列表。

通过这些方法，无论一个函数在何处被调用，都可以精确控制 this 的引用，这使得函数能以更灵活的方式被重复利用或组合。

七、常见问题和误解

this 的使用可能导致多种误解，特别是在复杂的应用或库的代码中。例如，在回调函数中，不小心丢失 this 的绑定是常见问题之一。尽管有多种方法可以避免这个问题，但了解 this 如何工作、何时会变化以及如何控制它仍然是非常重要的。

掌握JavaScript中 this 的工作机制是成为高级开发者的重要一步。透过实践和理解其中的概念可以有效地避免由于错误使用 this 而导致的问题，同时也能够充分利用其提供的灵活性。

相关问答FAQs：

问题 1： JavaScript中的“this”关键字有什么作用？

回答：在JavaScript中，“this”关键字用于引用当前执行上下文（函数、方法等）中的对象。它可以帮助我们访问和操作当前对象的属性和方法，使我们的代码更加灵活和可重用。

问题 2： JavaScript中的“this”关键字如何确定其指向的对象？

回答：JavaScript中的“this”关键字的指向是动态的，它取决于函数被调用的方式。当一个函数被以不同的方式调用，比如作为对象的方法调用、通过call()、apply()等方法调用，或者直接作为全局函数调用时，它的“this”指向会有所不同。要确定“this”的指向，我们需要了解函数的调用方式以及执行上下文的规则。

问题 3： 有没有办法在JavaScript中显式地设置“this”的值？

回答：是的，可以使用bind()、call()和apply()等方法来显式地设置“this”的值。bind()方法创建一个新的函数，并将其“this”值永久设为指定的值。call()和apply()方法可以直接调用函数并设置它们的“this”值，它们的区别在于传递参数的方式不同。通过这些方法，我们可以有更多的控制权，以确保“this”指向我们期望的对象。