JavaScript - this 鍵盤

你好，有抱負的 JavaScript 開發者！今天，我們將踏上一段令人興奮的旅程，探索 this 鍵盤的世界。作為你友好的鄰居計算機科學老師，我將指導你走過這個有時候有點棘手，但總是充滿好奇的概念。所以，拿起你喜歡的飲料，舒適地坐好，我們來深入探討！

What is 'this' 鍵盤？

想像你在派對上，有人大聲喊，「嘿，你！」誰會轉過身來？每個人，對吧？但如果他們說，「嘿，Sarah！」只有 Sarah 會回應。在 JavaScript 中，this 鍵盤就像對一個對象說「嘿，你！」。它是一種引用當前語境中的對象的方式。

this 鍵盤是一個特別的標識符，在每個函數的作用域中自動定義。但這裡有一個陷阱 - 它的值由函數是如何被調用的來確定。this 的這種動態性是它既強大又有時候令人困惑的原因。

'this' 指的是哪個對象？

現在我們來看看有點意思的部分。this 指的是的對象可以根據它是如何和在哪裡使用而改變。這就像一隻變色龍，根據它的周圍環境改變顏色。我們來看看一些情景：

語法

在我們深入探討之前，我們先快速看看我們如何使用 this：

console.log(this);

簡單，對吧？但不要被它的簡潔欺騙。當我們在不同的語境中使用它時，魔術（或惡作劇）就會發生。

JavaScript 'this' 在全局範圍內

當在全局範圍內使用（在任何函數之外）時，this 指的是全局對象。在瀏覽器中，這通常是 window 對象。

console.log(this === window); // true

this.myGlobalVar = "我是全局的！";
console.log(window.myGlobalVar); // "我是全局的！"

在這裡，this 就像 VIP 通行證，讓你可以進入整個派對（全局範圍）。

JavaScript 'this' 在函數中

當在普通函數中使用 this 時，它的值取決於函數是如何被調用的。

function showThis() {
console.log(this);
}

showThis(); // window (在非嚴格模式下)

在這種情況下，this 就像一隻丟失的幼犬，依附在附近的任何東西上 - 在非嚴格模式下，這是全局對象。

'this' 在嚴格模式下的函數中

嚴格模式就像嚴格的老師，不讓你逃避任何東西。在嚴格模式下，函數中的 this 是 undefined，除非顯式地設置。

"use strict";
function strictThis() {
console.log(this);
}

strictThis(); // undefined

'this' 在構造函數中

當函數被用作構造函數（使用 new 鍵盤）時，this 指的是新創建的對象。

function Person(name) {
this.name = name;
this.greet = function() {
console.log("你好，我是 " + this.name);
};
}

const john = new Person("John");
john.greet(); // "你好，我是 John"

在這裡，this 就像一張出生證書，確定了新出生對象的身份。

'this' 在箭頭函數中

箭頭函數是 JavaScript 世界的反叛者。它們不綁定自己的 this，而是從封閉範圍中繼承它。

const obj = {
name: "Alice",
sayHello: () => {
console.log("你好，" + this.name);
}
};

obj.sayHello(); // "你好，undefined"

在這種情況下，箭頭函數中的 this 不指向 obj，而是指向周圍範圍（可能是全局範圍）。

'this' 在對象方法中

當 this 在方法（作為對象屬性的函數）中使用時，它指的是調用方法的對象。

const car = {
brand: "Toyota",
getBrand: function() {
return this.brand;
}
};

console.log(car.getBrand()); // "Toyota"

在這裡，this 就像一個忠實的管家，始終指的是它的主人（對象）。

'this' 在對象方法中的子函數中

這裡的事情可能會變得複雜。在方法中的函數內，this 不再指向對象。

const restaurant = {
name: "美味佳肴",
getMenu: function() {
function displayName() {
console.log(this.name);
}
displayName();
}
};

restaurant.getMenu(); // undefined

在這種情況下，displayName() 中的 this 指向全局對象，而不是 restaurant。

JavaScript 'this' 在事件處理器中

在事件處理器中，this 通常指的是接收事件的元素。

<button id="myButton">點我！</button>

<script>
document.getElementById("myButton").addEventListener("click", function() {
console.log(this); // <button id="myButton">點我！</button>
});
</script>

在這裡，this 就像聚光燈，專注於節目中的明星 - 被點擊的元素。

JavaScript 中的顯式函數綁定

有時候，我們想成為老闆，告訴 this 它應該是什麼。我們可以使用 call()、apply() 或 bind() 來做到這點。

const person1 = { name: "Alice" };
const person2 = { name: "Bob" };

function sayHello() {
console.log("你好，" + this.name);
}

sayHello.call(person1); // "你好，Alice"
sayHello.apply(person2); // "你好，Bob"

const boundHello = sayHello.bind(person1);
boundHello(); // "你好，Alice"

這些方法就像導演，告訴 this 準確扮演哪個角色。

JavaScript 'this' 的優先級

現在我們來總結一下 this 綁定的優先級：

Rule	Precedence
new 鍵盤	1 (最高)
顯式綁定 (call、apply、bind)	2
方法調用	3
函數調用	4 (最低)

記住，箭頭函數是特殊的，並且總是從他們的周圍範圍繼承 this。

那你們就有了，各位！我們已經穿越了 this 的土地，探索了它的多種面貌和奇特之處。記住，理解 this 就像學騎自行車 - 起初可能會晃晃悠悠，但隨著練習，你會很快騎得飛快。持續編程，持續探索，最重要的是，用 JavaScript 繼續玩得開心！

Credits: Image by storyset