什么是这个＆＃x27;在JavaScript？-js教程-PHP中文网

What is 'this' in JavaScript?

核心要点

JavaScript 中的 this 通常指代“拥有”该方法的对象，但具体取决于函数的调用方式。
没有当前对象时，this 指代全局对象。在 Web 浏览器中，它由 window 表示。
调用函数时，this 保持全局对象；但调用对象构造函数或其任何方法时，this 指代对象的实例。
可以使用 call()、apply() 和 bind() 等方法更改 this 的上下文。这些方法使用给定的 this 值和参数调用函数。

JavaScript 是一门优秀的编程语言。几年前，这句话可能颇具争议，但开发者们重新发现了它的美丽和优雅。如果你不喜欢 JavaScript，可能是因为：

你遇到了浏览器 API 的差异或问题——这并非 JavaScript 本身的错。
你将其与基于类的语言（如 C 、C# 或 Java）进行比较——而 JavaScript 的行为并非你预期的那样。

this 关键字是最令人困惑的概念之一。在大多数语言中，this 是类实例化当前对象的引用。在 JavaScript 中，this 通常指代“拥有”该方法的对象，但这取决于函数的调用方式。

全局作用域

如果没有当前对象，this 指代全局对象。在 Web 浏览器中，它是 window——表示文档、位置、历史记录以及其他一些有用属性和方法的顶级对象。

window.WhoAmI = "我是 window 对象";
alert(window.WhoAmI);
alert(this.WhoAmI); // 我是 window 对象
alert(window === this); // true

登录后复制

调用函数

如果你正在调用函数，this 保持全局对象：

window.WhoAmI = "我是 window 对象";

function TestThis() {
    alert(this.WhoAmI); // 我是 window 对象
    alert(window === this); // true
}

TestThis();

登录后复制

调用对象方法

调用对象构造函数或其任何方法时，this 指代对象的实例——就像任何基于类的语言一样：

window.WhoAmI = "我是 window 对象";

function Test() {
    this.WhoAmI = "我是 Test 对象";

    this.Check1 = function() {
        alert(this.WhoAmI); // 我是 Test 对象
    };
}

Test.prototype.Check2 = function() {
    alert(this.WhoAmI); // 我是 Test 对象
};

var t = new Test();
t.Check1();
t.Check2();

登录后复制

使用 call 或 apply

本质上，call 和 apply 将 JavaScript 函数运行得好像它们是另一个对象的方法一样。一个简单的例子可以进一步说明：

function SetType(type) {
    this.WhoAmI = "我是 " + type + " 对象";
}

var newObject = {};
SetType.call(newObject, "newObject");
alert(newObject.WhoAmI); // 我是 newObject 对象

var new2 = {};
SetType.apply(new2, ["new2"]);
alert(new2.WhoAmI); // 我是 new2 对象

登录后复制

唯一的区别是 call 期望离散数量的参数，而 apply 可以传递参数数组。这就是 this 的简要说明！但是，有一些需要注意的地方可能会让你陷入困境。我们将在我的下一篇文章中讨论这些……

关于 JavaScript 中 this 的常见问题

JavaScript 中的 `this` 关键字是什么？为什么它很重要？

JavaScript 中的 this 关键字是一个特殊的关键字，它引用调用函数的上下文。它是函数所属对象的引用。this 的值取决于函数的调用方式。它很重要，因为它允许你在函数中访问对象的属性和方法，使你的代码更灵活、更可重用。

`this` 关键字在不同上下文中的工作方式如何？

this 的值会根据其使用上下文而改变。在方法中，this 指代拥有者对象。单独使用时，this 指代全局对象。在函数中，this 指代全局对象。在事件中，this 指代接收事件的元素。

你能解释 `this` 在事件处理程序中的工作方式吗？

在事件处理程序中，this 指代接收事件的 HTML 元素。这允许你在事件处理程序函数中直接访问和操作该元素。例如，如果你有一个带有 onclick 事件的按钮，onclick 函数中的 this 将指代按钮元素。

`this` 在箭头函数中的行为如何？

箭头函数处理 this 的方式与普通函数不同。在箭头函数中，this 是词法绑定的。这意味着它使用包含箭头函数的代码中的 this。因此，对于箭头函数，this 保持封闭词法上下文的 this 的值。

JavaScript 中的 `this` 与其他编程语言中的 `this` 有什么区别？

在许多面向对象的编程语言中，this 始终指代当前类的实例。然而，在 JavaScript 中，this 的值由执行上下文和函数的调用方式决定，而不是由函数的定义位置决定。

如何更改函数中 `this` 的上下文？

你可以使用 call()、apply() 和 bind() 等方法更改 this 的上下文。call() 和 apply() 方法使用给定的 this 值和参数调用函数。两者之间的区别在于 call() 接受参数列表，而 apply() 接受单个参数数组。bind() 方法返回一个新函数，允许你将函数绑定到特定对象。