關鍵字 this 是指在呼叫時繫結至函式的物件值，也就是說，其值會因函式是否以方法、獨立函式或建構函式的形式呼叫而有所不同。
呼叫函式時，系統會在背景建立關鍵字 this 的例項，做為包含該函式的物件參照，讓您可以存取在其範圍內定義的屬性和方法。使用 this 的方式與使用 const 宣告的變數類似。就像常數一樣，this 無法移除，且無法重新指派其值，但 this 關鍵字所包含物件的各項方法和屬性可以變更。
全域繫結
在函式或物件內容之外，this 會參照 globalThis 屬性，這是大多數 JavaScript 環境中全域物件的參照。在網路瀏覽器中執行的指令碼情境中，全域物件是 window 物件：
this; > Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, ...} 在 Node.js 中，globalThis 是 global 物件：
$ node Welcome to Node.js v20.10.0. Type ".help" for more information. > this <ref *1> Object [global] { ... } 在嚴格模式之外，this 也會參照獨立函式中的全域物件，因為父項 Window 是實際「擁有」這些函式的物件。
function myFunction() { console.log( this ); } myFunction(); > Window {...} (function() { console.log( this ); }()); > Window {...} 使用嚴格模式時，this 在獨立函式內的值為 undefined：
(function() { "use strict"; console.log( this ); }()); > undefined 在嚴格模式推出前，this 的 null 或 undefined 值會由對全域物件的參照取代。有時您可能會看到全域繫結被稱為「預設繫結」，這是因為這種舊版行為。
隱含繫結
當函式以物件方法的形式呼叫時，該方法內的 this 例項會參照包含該方法的物件，並提供對該方法和屬性的存取權：
let myObject = { myValue: "This is my string.", myMethod() { console.log( this.myValue ); } }; myObject.myMethod(); > "This is my string." this 的值似乎取決於函式及其包函物件的定義方式。相反地，this 值的內容為目前的執行內容。在本例中，執行階段是 myObject 物件呼叫 myMethod 方法，因此 myObject 是 this 的值。在先前的範例中，這可能看起來像是技術性問題，但對於 this 的進階用法來說，這是必須留意的關鍵差異。
一般來說，請以不預期周圍程式碼具有任何特定結構的方式使用 this。這項規則的例外狀況是 ES5 箭頭函式。
箭頭函式中的 this
在箭頭函式中，this 會解析為語意上包函環境中的繫結。也就是說，箭頭函式中的 this 會參照該函式最接近的包函式中的 this 值：
let myObject = { myMethod() { console.log( this ); }, myArrowFunction: () => console.log( this ), myEnclosingMethod: function () { this.myArrowFunction = () => { console.log(this) }; } }; myObject.myMethod(); > Object { myMethod: myMethod(), myArrowFunction: myArrowFunction() } myObject.myArrowFunction(); > Window {...} 在上一個範例中，myObject.myMethod() 會將 myObject 記錄為「擁有」該方法的物件，但 myObject.myArrowFunction() 會傳回 globalThis (或 undefined)，因為箭頭函式中的 this 例項會改為參照最高的包函範圍。
在以下範例中，myEnclosingMethod 會在執行時，在包含它的物件上建立箭頭函式。箭頭函式中的 this 例項現在會參照包函環境中的 this 值，也就是包含該箭頭函式的做法。由於 myEnclosingMethod 內的 this 值參照 myObject，因此在定義箭頭函式後，箭頭函式內的 this 也會參照 myObject：
let myObject = { myMethod() { console.log( this ); }, myEnclosingMethod: function () { this.myArrowFunction = () => { console.log(this) }; } }; myObject.myEnclosingMethod(); myObject.myArrowFunction(); > Object { myMethod: myMethod(), myArrowFunction: myArrowFunction() } 明確繫結
隱含繫結可處理大多數使用 this 的用途。不過，您有時可能需要 this 的值來代表特定執行作業環境，而非假設的作業環境。以下是說明這項功能的示例 (雖然稍微過時)，這個示例會在 setTimeout 的回呼函式中使用 this，因為這個回呼具有獨特的執行情境：
var myObject = { myString: "This is my string.", myMethod() { console.log( this.myString ); } }; myObject.myMethod(); > "This is my string." setTimeout( myObject.myMethod, 100 ); > undefined 雖然 setTimeout 的這個特定缺點已由其他功能解決，但先前已透過在預期情境範圍內明確參照 this 的值，解決了類似的「遺失」this的問題。您可能偶爾會在舊版程式碼集區中，看到 this 例項以 that、self 或 _this 等 ID 指派給變數。以下是含有傳遞 this 值的變數常見的 ID 慣例。
使用 call()、bind() 或 apply() 方法呼叫函式時，this 會明確參照要呼叫的物件：
let myFunction = function() { console.log( this.myValue ); } let myObject = { "myValue" : "This is my string." }; myFunction.call( myObject ); > "This is my string." var myObject = { myString: "This is my string.", myMethod() { console.log( this.myString ); } }; setTimeout( myObject.myMethod.bind( myObject ), 100 ); > "This is my string." 明確繫結會覆寫隱含繫結提供的 this 值。
let myObject = { "myValue" : "This string sits alongside myMethod.", myMethod() { console.log( this.myValue ); } }; let myOtherObject = { "myValue" : "This is a string in another object entirely.", }; myObject.myMethod.call( myOtherObject ); > "This is a string in another object entirely." 如果以會將 this 值設為 undefined 或 null 的方式呼叫函式，該值會在嚴格模式外部由 globalThis 取代：
let myFunction = function() { console.log( this ); } myFunction.call( null ); > Window {...} 同樣地，如果以會為 this 提供基本值的方式呼叫函式，該值會在嚴格模式外替換為基本值的包裝函式物件：
let myFunction = function() { console.log( this ); } let myNumber = 10; myFunction.call( myNumber ); > Number { 10 } 在嚴格模式中，傳遞的 this 值不會以任何方式強制轉換為物件，即使是基本、null 或 undefined 值也是如此：
"use strict"; let myFunction = function() { console.log( this ); } let myNumber = 10; myFunction.call( myNumber ); > 10 myFunction.call( null ); > null new 繫結
當 class 用於使用 new 關鍵字的建構函式時，this 會參照新建立的例項：
class MyClass { myString; constructor() { this.myString = "My string."; } logThis() { console.log( this ); } } const thisClass = new MyClass(); thisClass.logThis(); > Object { myString: "My string." } 同樣地，使用 new 呼叫的建構函式內的 this 值會參照要建立的物件：
function MyFunction() { this.myString = "My string."; this.logThis = function() { console.log( this ); } } const myObject = new MyFunction(); myObject.logThis(); > Object { myString: "My string.", logThis: logThis() } 事件處理常式繫結
在事件處理常式的內容中，this 的值會參照叫用該事件的物件。在事件處理常式的回呼函式中，this 會參照與處理常式相關聯的元素：
let button = document.querySelector( "button" ); button.addEventListener( "click", function( event ) { console.log( this ); } ); 當使用者與上一個程式碼片段中的 button 互動時，結果會是包含 <button> 本身的元素物件：
> Button {} 當箭頭函式用於事件監聽器回呼時，this 的值會再次由最接近的包函執行作業內容提供。在頂層，這表示事件處理常式回呼函式中的 this 為 globalThis：
let button = document.querySelector( "button" ); button.addEventListener( "click", ( event ) => { console.log( this ); } ); > undefined 如同其他物件一樣，當您使用 call()、bind() 或 apply() 方法參照事件監聽器的回呼函式時，this 會明確參照物件：
let button = document.querySelector( "button" ); let myObject = { "myValue" : true }; function handleClick() { console.log( this ); } button.addEventListener( "click", handleClick.bind( myObject ) ); > Object { myValue: true } 進行隨堂測驗
如果是在網路瀏覽器中執行的指令碼，在函式或物件內容之外使用 this 時，系統會參照哪個全域物件？
window 物件browser 物件undefined 物件