什麼是這個＆＃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() 方法返回一個新函數，允許你將函數綁定到特定對象。