JavaScript 的 this 指向，一文解釋清楚
this，作為 JavaScript 中最令人困惑的概念之一，常常讓開發(fā)者頭疼不已。不同的調(diào)用方式、不同的上下文環(huán)境，都會導(dǎo)致 this 指向不同的對象。掌握 this 的指向，是理解 JavaScript 核心機(jī)制的關(guān)鍵，也是成為一名合格的 JavaScript 工程師的必備技能。本文將一次性講清楚 JavaScript 的 this 指向，讓你徹底擺脫 this 的困擾！
一、this 是什么？
簡單來說，this 是一個(gè)關(guān)鍵字，它指向的是函數(shù)執(zhí)行時(shí)的上下文對象。也就是說，this 的值取決于函數(shù)是如何被調(diào)用的，而不是函數(shù)在哪里定義的。
二、this 的四種綁定規(guī)則
JavaScript 中 this 的指向主要由以下四種綁定規(guī)則決定：
1. 默認(rèn)綁定 (Default Binding)
示例：
function foo() {
console.log(this);
}
foo(); // 非嚴(yán)格模式下，輸出 window (瀏覽器) 或 global (Node.js)
// 嚴(yán)格模式下，輸出 undefined
"use strict";
function bar() {
console.log(this);
}
bar(); // 輸出 undefined- 在非嚴(yán)格模式下，如果函數(shù)是獨(dú)立調(diào)用（即沒有明確的調(diào)用者），this 指向全局對象 (瀏覽器中是 window，Node.js 中是 global)。
- 在嚴(yán)格模式下，this 指向 undefined。
2. 隱式綁定 (Implicit Binding)
示例：
如果函數(shù)作為對象的方法調(diào)用，this 指向調(diào)用該方法的對象。
3. 顯式綁定 (Explicit Binding)
示例：
- 可以使用 call()、apply() 或 bind() 方法來顯式地指定 this 的指向。
- call() 和 apply() 方法會立即執(zhí)行函數(shù)，并將 this 綁定到指定的對象。它們的區(qū)別在于，call() 方法接收一個(gè)參數(shù)列表，而 apply() 方法接收一個(gè)參數(shù)數(shù)組。
- bind() 方法會創(chuàng)建一個(gè)新的函數(shù)，并將 this 永久綁定到指定的對象。新函數(shù)不會立即執(zhí)行，需要手動調(diào)用。
4. new 綁定 (new Binding)
示例：
當(dāng)使用 new 關(guān)鍵字調(diào)用函數(shù)時(shí)，會發(fā)生以下步驟：
- 創(chuàng)建一個(gè)新的空對象。
- 將新對象的原型指向構(gòu)造函數(shù)的 prototype 屬性。
- 將構(gòu)造函數(shù)的 this 綁定到新對象。
- 執(zhí)行構(gòu)造函數(shù)中的代碼。
- 如果構(gòu)造函數(shù)沒有顯式返回一個(gè)對象，則返回新對象。
5. 優(yōu)先級
當(dāng)多個(gè)綁定規(guī)則同時(shí)適用時(shí)，this 的指向由優(yōu)先級最高的規(guī)則決定。優(yōu)先級從高到低依次為：
- new 綁定
- 顯式綁定
- 隱式綁定
- 默認(rèn)綁定
6. 特殊情況
(1) 箭頭函數(shù)： 箭頭函數(shù)沒有自己的 this，它會從定義時(shí)所在的上下文中繼承 this。箭頭函數(shù)的 this 無法通過 call()、apply() 或 bind() 方法修改。
示例：
(2) DOM 事件處理函數(shù)： 在 DOM 事件處理函數(shù)中，this 通常指向觸發(fā)事件的 DOM 元素。但可以使用 addEventListener() 方法的 bind() 方法來修改 this 的指向。
示例：
<button id="myButton">Click me</button>
<script>
const button = document.getElementById("myButton");
button.addEventListener("click", function() {
console.log(this); // 輸出: <button id="myButton">Click me</button>
});
const obj = {
name: "MyObject"
};
button.addEventListener("click", function() {
console.log(this.name);
}.bind(obj)); // 輸出: MyObject
</script>
