一勞永逸地搞懂 JavaScript中This
引言：this 在 JS 中 —— 為什么它如此重要
你是否曾覺得 JavaScript 似乎在戲弄你，尤其是當它在你面前揮舞 this 關鍵字時？那種“好吧，JavaScript，今天我們玩什么游戲？”的感覺。特別是當你試圖確定在某段代碼中 this 引用的是什么時。
理解 this 就像在JavaScript廣闊的領域中握住指南針。這不僅僅是為了弄清楚一個關鍵字；它是為了打開通往高級編碼技巧和模式的大門。
為什么我們應該關心“this”？
- 普遍性：就像你無法逃避的流行曲調， this 在JavaScript中隨處可見。從小腳本到龐大的Web應用程序，它都會顯現出來。
- 提高水平：解讀 this 意味著你正在走向像經驗豐富的專家那樣的編碼。這是更接近健壯且無錯誤的腳本的一步。
- 變色龍行為：this 在許多情境中的含義都會變化，這使它既有趣又時而令人困惑。
接下來會發生什么？
做好準備，因為我們即將一勞永逸地揭開this的神秘面紗。我們將探索其所有的細微差別，涵蓋你可能遇到的每一個場景。不再有猜測或撓頭的困惑！
準備深入了解嗎？無論你是編寫腳本多年還是剛開始JavaScript之旅，讓我們攜手共進，一起解開this的神秘面紗！
“this”在全局上下文中：從基礎開始
當你剛開始理解JavaScript中的 this 關鍵字時，最好從頭開始 —— 也就是全局上下文。但是，我們說的全局上下文是什么意思呢？
簡單地說，全局上下文是默認的、頂級的環境，當你的代碼不在任何函數或對象內部時，它就位于這個環境中。那么，在這里 this 是如何表現的呢？
在瀏覽器中：
如果你在瀏覽器中運行你的 JavaScript 代碼（像我們大多數人經常做的那樣），全局上下文中的this指的是window對象。這是因為，在瀏覽器中，window 對象就是全局對象。
console.log(this === window); // true
var variable = “我是一個全局變量！”;
console.log(this.variable); // “我是一個全局變量！”在這里，當我們聲明變量時，它被附加到 window 對象上。因此，在全局上下文中使用this.variable 會給我們那個變量的值。
在Node.js中：
如果你在Node.js環境中運行你的代碼，情況會有所不同。在Node.js中，this 的頂級值是一個空對象，不等同于 global。
console.log(this); // {}
global.globalVar = “我在Node中的全局對象上！”;
console.log(global.globalVar); // “我在Node中的全局對象上！”了解 this 在全局上下文中的行為可能會根據代碼的執行位置而有所不同。
那么，為什么這很重要？
掌握全局上下文中的 this 為理解其在更復雜場景中的行為提供了基礎。當你深入JavaScript時，你會發現有些情況下，函數或方法是從全局上下文中調用的，理解這種行為變得至關重要。
通過掌握基礎知識，當我們深入探討 this 的后續部分時，你為自己奠定了成功的基礎。
“this”在常規函數中：上下文是關鍵
啊，常規函數。與它們的新型箭頭函數表親相比，它們可能看起來有點老派，但它們仍然是JavaScript的基礎部分。當涉及到這些函數內部“this”的行為時，事情可能會變得有點棘手。
基本行為：
在其核心，常規函數內部的 this 值是由如何調用該函數（其調用上下文）來確定的。讓我們分解一下：
直接調用函數：
當你在全局上下文中調用一個函數時，this 將引用全局對象。
function showThis() {
console.log(this);
}
showThis(); // 在瀏覽器中是‘window’，在Node.js中是‘global’作為對象內的方法：
當一個函數被定義為對象方法時，this 將引用擁有該方法的對象。
const obj = {
name: “John”,
sayName: function() {
console.log(this.name);
}
};
obj.sayName(); // “John”在這里，sayName 方法使用 obj 對象調用。因此，sayName 內部的 this 指的是 obj。
特殊情況
使用call、apply和bind：
這些是允許你直接設置 this 應該引用什么的方法，而不考慮函數如何或在哪里被調用。
call和apply立即用指定的上下文調用函數。
function greet(greeting) {
console.log(greeting + ‘, ‘ + this.name);
}
const person = { name: “Alice” };
greet.call(person, “Hello”); // “Hello, Alice”bind返回一個帶有綁定上下文的新函數，但不立即執行它。
const boundGreet = greet.bind(person);
boundGreet(“Hi”); // “Hi, Alice”為什么上下文很重要？
理解常規函數內部this的行為都是關于上下文的。它是關于知道在調用時哪個對象“擁有”函數。這種洞察可以防止無數的錯誤和挫敗感，尤其是當你的JavaScript項目在復雜性上增長時。
請記住，在JavaScript的錯綜復雜的迷宮中，this 關鍵字是你的光明之光。在常規函數的世界中，它是上下文，確保你總是在正確的軌道上。當我們進一步探索時，觀察 this 和上下文之間的動態舞蹈，適應語言的不同節奏。
箭頭函數和“this”：游戲規則改變者
好吧，讓我們談談箭頭函數。當ES6出現時，它帶來了這種寫函數的新方法，不僅看起來更簡潔，而且還改變了我們對 this 的看法。
這都是關于你來自哪里的
你知道在生活中，我們中的一些人根據我們所在的地方和我們與誰在一起會戴不同的帽子嗎？常規函數也做類似的事情與 this。他們可以是變色龍，根據他們如何被調用來改變 this 引用什么。
而箭頭函數呢？他們是直接的。他們從他們的周圍抓住 this 的值，并堅持使用它。無論他們去哪里或如何被使用。
const person = {
name: ‘Anna’,
activities: [‘reading’, ‘hiking’],
printActivities() {
this.activities.forEach(activity => {
console.log(${this.name} loves ${activity});
});
}
};
person.printActivities();
// 輸出：
// Anna loves reading
// Anna loves hiking注意 forEach 中的箭頭函數嗎？它舒適地使用 printActivities 中的 this。沒有戲劇。
但有一個問題。
箭頭函數有點固執。我們用來為常規函數設置 this 的方法，如 call、apply或bind？它們不適用于箭頭函數。
const obj = {
value: ‘hello’,
print: () => {
console.log(this.value);
}
};
const anotherObj = { value: ‘world’ };
obj.print.call(anotherObj); // 輸出：undefined我們試圖用 call 偷偷摸摸，但 print 中的箭頭函數就像，“我知道我是誰！”并堅持使用它的原始 this。
所以，箭頭還是不箭頭？
箭頭函數就像你擁有的那個最喜歡的工具 —— 超級有用，但不適合每一項工作。當你想保持 this不變時，尤其是在回調中，它們是非常有價值的。但是當你需要一些靈活性時？經典函數可能是你的朋友。
在IIFEs中：this 的獨特角色
在我們深入了解IIFE中的 this 之前，讓我們澄清一下什么是IIFE。想象一下：你剛寫了一個函數，而在你有機會坐下來欣賞你的作品之前，它已經開始工作了。那就是IIFE！
IIFE（立即調用的函數表達式）就像那個朋友，一做完計劃就立刻行動。一旦定義，砰 —— 它就運行了。而且，僅僅因為它速度快并不意味著它不是多才多藝的。你可以用標準函數、箭頭函數，甚至加入一些 async-await 魔法來制作它。它們是這樣的：
// 經典的方式
(function () {
console.log(“這是一個IIFE！”);
})();
// 現代的、箭頭函數的變種
(() => {
console.log(“箭頭函數IIFE正在行動！”);
})();
// 對于那些異步的冒險
(async () => {
await console.log(“Async-await與IIFE結合？是的！”);
})();現在，進入IIFEs中的 this及其獨特的舞蹈。當你在IIFE內部，你看著 this，你基本上在看全局對象。在瀏覽器世界中，那是我們的可靠朋友，window。
(function () {
console.log(this); // Outputs: Window {...} in browsers
})();但這里有一個轉折：用神秘的 use strict 聲明開始你的IIFE，這就會有一個身份危機。而不是指向全局對象，它只會坐在那里，直到你用像 call 或 apply 這樣的方法給它一些目的。
(function () {
'use strict';
console.log(this); // Outputs: undefined
})();this 在事件處理程序中：與DOM交互
讓我們描繪一個畫面。你在一個網頁上，你最喜歡的歌正在播放，有一個按鈕在那里誘惑你點擊它。在你知道之前，JavaScript的魔法就活了起來，事情開始發生。但你有沒有想過內部工作，使這些DOM元素跳舞的隱藏的木偶線？在這個魔法的核心是我們的好朋友：this。
主要吸引力：事件監聽器
當你將一個事件監聽器綁定到一個DOM元素時，你基本上是在耳語指示，告訴它，“嘿，當有人與你互動時，做這件事。”當那個“事情”涉及到使用 this 時，它通常指的是事件被調用的元素。
const button = document.querySelector(‘#myButton’);
button.addEventListener(‘click’, function() {
console.log(this.innerHTML); // 輸出：#myButton內的任何文本
});在這種情況下，this 直接指向按鈕。就像按鈕說，“是的，我是被點擊的那個！”
情節轉折：箭頭函數
現在，如果你想在事件監聽器中使用箭頭函數，要小心。記住我們之前討論過箭頭函數從它們的周圍繼承 this 嗎？好吧，這意味著它們不像常規函數那樣綁定自己的 this。
button.addEventListener(‘click’, () => {
console.log(this.innerHTML); // 哎呀！這不會按預期工作。
});在這個設置中，this 不指向我們的按鈕。它可能指向窗口或另一個外部范圍，導致出現意外的結果。
動態事件：手動設置 this
有時，你需要更多的控制，你可能想要指定 this 引用什么。對于這樣的情況，我們有 bind 來拯救！
function displayText() {
console.log(this.innerHTML);
}
const boundFunction = displayText.bind(button);
button.addEventListener(‘click’, boundFunction);在這里，無論 displayText 從哪里調用，使用 bind，我們都堅定地告訴它考慮按鈕作為它的this。
“this”在構造函數中：帶有上下文的建筑
想象一下你是一名建筑師。你手里有藍圖，材料準備好了，每次你開始一個新項目，你都會建造結構，雖然基于類似的設計，但都有自己獨特的性格和身份。在JavaScript中，當我們談論構造函數時，我們實際上是在討論這些主要的藍圖，它們產生了獨特的對象。正如你可能猜到的，this 在個性化這些創作中起到了關鍵的作用。
基礎：構造函數
在其核心，構造函數只是一個函數。但它是一個有抱負的函數。它夢想著創建多個對象，每個對象都是根據其框架塑造的，但持有自己的一套值。
function Car(make, model) {
this.make = make;
this.model = model;
}
const myCar = new Car(‘Toyota’, ‘Corolla’);
console.log(myCar.make); // 輸出：Toyota注意我們如何在構造函數中使用 this？這是我們說的，“對于每一輛新車，將給定的制造和模型分配給這個特定的實例。”
旋轉：原型方法
使用構造函數的一個好處是能夠將方法附加到它們的原型上。這些方法可以通過 this 訪問實例特定的數據，使它們相當動態。
Car.prototype.displayInfo = function() {
console.log(這輛車是一個${this.make} ${this.model}。);
};
myCar.displayInfo(); // 輸出：這輛車是一個Toyota Corolla。在這里，displayInfo 方法使用 this 來訪問個別汽車的制造和模型，盡管該方法在實例之間是共享的。
小心：箭頭函數陷阱
快速提醒！記得我們之前關于箭頭函數的聊天嗎？即使在這里，它們與 this 的行為也是一致的。所以，如果你試圖用一個箭頭函數來制作一個構造函數...好吧，期望一些怪癖。
const Gadget = (name) => {
this.name = name;
}
// const newGadget = new Gadget(‘Phone’); // 這會拋出一個錯誤！在上面的例子中，箭頭函數不創建自己的 this。相反，它從其封閉的范圍繼承它，當用作構造函數時，可能會導致意外的結果。
與“this”有關的常見失誤：要注意什么
我們認為我們已經掌握了它的時候，它給了我們一個曲線球。這就像試圖抓住一個滑溜的魚；一旦你失去焦點，它就消失了。但不要擔心，我們在這里幫助你避免一些常見的陷阱。
忘記“new”：當你使用構造函數創建一個新對象時，確保使用new關鍵字。否則，this將指向全局對象，可能會導致意外的結果。
function Dog(name) {
this.name = name;
}
const myDog = Dog(‘Buddy’); // Oops! 我們忘記了‘new’
console.log(window.name); // 輸出：Buddy事件監聽器和回調：當你在事件監聽器或回調函數中使用this時，確保你知道它引用的是什么。如果需要，使用bind或箭頭函數來確保正確的上下文。
構造函數和箭頭函數：如前所述，箭頭函數不綁定自己的 this。嘗試使用它們作為構造函數可能會導致錯誤。
- 方法和對象字面量：當你在對象字面量中定義方法時，如果你使用箭頭函數，this將不會指向該對象。確保使用常規函數語法。
const person = {
name: ‘Ella’,
greet: () => {
console.log(‘Hello, ‘ + this.name); // Oops! 這不會按預期工作。
}
};
person.greet(); // 輸出：Hello, undefined動態方法：當你動態地添加方法到一個對象時，確保你知道this引用的是什么。如果需要，使用bind來確保正確的上下文。
const cat = {
name: ‘Whiskers’
};
function purr() {
console.log(this.name + ‘ is purring...’);
}
cat.purr = purr;
cat.purr(); // 輸出：Whiskers is purring...但如果我們這樣做：
const purring = cat.purr;
purring(); // Oops! 這不會按預期工作。總結：“this”之旅的終點
我們已經走過了一段漫長的旅程，探索了JavaScript中 this 關鍵字的各個方面。從全局上下文到構造函數，從事件處理程序到常規函數，我們已經涵蓋了你可能遇到的每一個場景。
現在，你已經武裝了自己，準備好在你的代碼中恰當地使用 this。無論你是在創建一個小型腳本還是一個龐大的Web應用程序，你都知道如何導航 this 的變化多端的行為。
但請記住，學習是一個持續的過程。隨著你繼續編寫更多的JavaScript代碼，你可能會遇到新的挑戰和情境。但現在，你已經有了一個堅實的基礎，可以幫助你在遇到困難時找到正確的方向。
