透過簡單的故事了解 JavaScript 中的 this
用簡單的故事了解 this
是什麼
小明和小美是一對夫妻,他們住在芝麻街的 34 號,有一天小明或小美說:「這個房子太舊了,需要重新裝修!」,可以發現這個 this
就代指小明和小美所住的家,也就是「芝麻街 34 號」的意思。
但假設今天呼叫 this
的人不是小明和小美,而是另外一個家庭,那麼 this
會代表「另外一個家」,而不是「芝麻街 34 號」,在這個故事中的概念實際上與 JavaScript 的 this
一模一樣!
什麼是 this
簡單來說,誰呼叫this
,this
就代表誰。
在 JavaScript 中可以使用 this
在全域以及函式執行環境中,此外 this
在嚴格模式下的表現也會有所不同。以下會舉例四種使用情境。
其中直接在全域中使用 this
與在函式中使用 this
意義並不大(方法一、二),知道就好。
一、在全域中使用 this
如果直接打印 this
,那麼用瀏覽器中執行就會是 window
,在 node.js 中執行會是 global
。
二、在函式中使用 this
在非嚴格模式下, this
會指向全域物件,也就是 window
或 global
,這是因為執行環境(比如說瀏覽器)認為你是在指 window.呼叫的函式
。
但在嚴格模式下, this
會是 undefined
,避免 this
莫名的存取到全域物件,就算在嵌套的函式中也是一樣。
三、在方法中使用 this
上學的小孩就叫做「學生」,在物件中的函式就被稱作「方法」。如果呼叫了一個方法,那麼 JavaScript 就會將 this
指向該方法所屬的物件。
四、在建構式中使用 this
當使用 new
關鍵字串建一個新的物件時,那麼 JavaScript 就會將 this
指向該方法所屬的物件。
指定 this
前面提到 4 使用情境,但是有時候會需要手動指定 this
的值,這時候就可以使用 call()
、apply()
、bind()
三種方法。
總結
this
會如此讓人混亂是因為它需要基於前後文來判斷,最簡單的原則就是:誰呼叫 this
,this
就代表誰。