. this 適合你嗎？

我看到許多文章在介紹 JavaScript 的 this 時都會假設(shè)你學(xué)過某種面向?qū)ο蟮木幊陶Z言，比如 Java、C++ 或 Python 等。但這篇文章面向的讀者是那些不知道 this 是什么的人。我盡量不用任何術(shù)語來解釋 this 是什么，以及 this 的用法。

也許你一直不敢解開 this 的秘密，因為它看起來挺奇怪也挺嚇人的。或許你只在 StackOverflow 說你需要用它的時候（比如在 React 里實現(xiàn)某個功能）才會使用。

在深入介紹 this 之前，我們首先需要理解函數(shù)式編程和面向?qū)ο缶幊讨g的區(qū)別。

2. 函數(shù)式編程 vs 面向?qū)ο缶幊?/strong>

你可能不知道，JavaScript 同時擁有面向?qū)ο蠛秃瘮?shù)式的結(jié)構(gòu)，所以你可以自己選擇用哪種風(fēng)格，或者兩者都用。

我在很早以前使用 JavaScript 時就喜歡函數(shù)式編程，而且會像躲避瘟疫一樣避開面向?qū)ο缶幊蹋驗槲也焕斫饷嫦驅(qū)ο笾械年P(guān)鍵字，比如 this。我不知道為什么要用 this。似乎沒有它我也可以做好所有的工作。

而且我是對的。

在某種意義上 。也許你可以只專注于一種結(jié)構(gòu)并且完全忽略另一種，但這樣你只能是一個 JavaScript 開發(fā)者。為了解釋函數(shù)式和面向?qū)ο笾g的區(qū)別，下面我們通過一個數(shù)組來舉例說明，數(shù)組的內(nèi)容是 Facebook 的好友列表。

假設(shè)你要做一個 Web 應(yīng)用，當(dāng)用戶使用 Facebook 登錄你的 Web 應(yīng)用時，需要顯示他們的 Facebook 的好友信息。你需要訪問 Facebook 并獲得用戶的好友數(shù)據(jù)。這些數(shù)據(jù)可能是 firstName、lastName、username、numFriends、friendData、birthday 和 lastTenPosts 等信息。

const data=[
 {
 firstName: 'Bob',
 lastName: 'Ross',
 username: 'bob.ross', 
 numFriends: 125,
 birthday: '2/23/1985',
 lastTenPosts: ['What a nice day', 'I love Kanye West', ...],
 },
 ...
]

假設(shè)上述數(shù)據(jù)是你通過 Facebook API 獲得的。現(xiàn)在需要將其轉(zhuǎn)換成方便你的項目使用的格式。我們假設(shè)你想顯示的好友信息如下：

• 姓名，格式為`${firstName} ${lastName}`
• 三篇隨機文章
• 距離生日的天數(shù)

3. 函數(shù)式方式

函數(shù)式的方式就是將整個數(shù)組或者數(shù)組中的某個元素傳遞給某個函數(shù)，然后返回你需要的信息：

const fullNames=getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

首先我們有 Facebook API 返回的原始數(shù)據(jù)。為了將其轉(zhuǎn)換成需要的格式，首先要將數(shù)據(jù)傳遞給一個函數(shù)，函數(shù)的輸出是（或者包含）經(jīng)過修改的數(shù)據(jù)，這些數(shù)據(jù)可以在應(yīng)用中向用戶展示。

我們可以用類似的方法獲得隨機三篇文章，并且計算距離好友生日的天數(shù)。

函數(shù)式的方式是：將原始數(shù)據(jù)傳遞給一個函數(shù)或者多個函數(shù)，獲得對你的項目有用的數(shù)據(jù)格式。

4. 面向?qū)ο蟮姆绞?/strong>

對于編程初學(xué)者和 JavaScript 初學(xué)者，面向?qū)ο蟮母拍羁赡苡悬c難以理解。其思想是，我們要將每個好友變成一個對象，這個對象能夠生成你一切開發(fā)者需要的東西。

你可以創(chuàng)建一個對象，這個對象對應(yīng)于某個好友，它有 fullName 屬性，還有兩個函數(shù) getThreeRandomPosts 和 getDaysUntilBirthday。

function initializeFriend(data) {
 return {
 fullName: `${data.firstName} ${data.lastName}`,
 getThreeRandomPosts: function() {
 // get three random posts from data.lastTenPosts
 },
 getDaysUntilBirthday: function() {
 // use data.birthday to get the num days until birthday
 }
 };
}
const objectFriends=data.map(initializeFriend)
objectFriends[0].getThreeRandomPosts() 
// Gets three of Bob Ross's posts

面向?qū)ο蟮姆绞骄褪菫閿?shù)據(jù)創(chuàng)建對象，每個對象都有自己的狀態(tài)，并且包含必要的信息，能夠生成需要的數(shù)據(jù)。

5. 這跟 this 有什么關(guān)系？

你也許從來沒想過要寫上面的 initializeFriend 代碼，而且你也許認(rèn)為，這種代碼可能會很有用。但你也注意到，這并不是真正的面向?qū)ο蟆?/p>

其原因就是，上面例子中的 getThreeRandomPosts 或 getdaysUntilBirtyday 能夠正常工作的原因其實是閉包。因為使用了閉包，它們在 initializeFriend 返回之后依然能訪問 data。關(guān)于閉包的更多信息可以看看這篇文章：作用域和閉包（https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch5.md）。

還有一個方法該怎么處理？我們假設(shè)這個方法叫做 greeting。注意方法（與 JavaScript 的對象有關(guān)的方法）其實只是一個屬性，只不過屬性值是函數(shù)而已。我們想在 greeting 中實現(xiàn)以下功能：

function initializeFriend(data) {
 return {
 fullName: `${data.firstName} ${data.lastName}`,
 getThreeRandomPosts: function() {
 // get three random posts from data.lastTenPosts
 },
 getDaysUntilBirthday: function() {
 // use data.birthday to get the num days until birthday
 },
 greeting: function() {
 return `Hello, this is ${fullName}'s data!`
 }
 };
}

這樣能正常工作嗎？

不能！

我們新建的對象能夠訪問 initializeFriend 中的一切變量，但不能訪問這個對象本身的屬性或方法。當(dāng)然你會問，

難道不能在 greeting 中直接用 data.firstName 和 data.lastName 嗎？

當(dāng)然可以。但要是想在 greeting 中加入距離好友生日的天數(shù)怎么辦？我們最好還是有辦法在 greeting 中調(diào)用 getDaysUntilBirthday。

這時輪到 this 出場了！

6. 終于——this 是什么

this 在不同的環(huán)境中可以指代不同的東西。默認(rèn)的全局環(huán)境中 this 指代的是全局對象（在瀏覽器中 this 是 window 對象），這沒什么太大的用途。而在 this 的規(guī)則中具有實用性的是這一條：

如果在對象的方法中使用 this，而該方法在該對象的上下文中調(diào)用，那么 this 指代該對象本身。

你會說“在該對象的上下文中調(diào)用”……是啥意思？

別著急，我們一會兒就說。

所以，如果我們想從 greeting 中調(diào)用 getDaysUntilBirtyday 我們只需要寫 this.getDaysUntilBirthday，因為此時的 this 就是對象本身。

附注：不要在全局作用域的普通函數(shù)或另一個函數(shù)的作用域中使用 this！this 是個面向?qū)ο蟮臇|西，它只在對象的上下文（或類的上下文）中有意義。

我們利用 this 來重寫 initializeFriend：

function initializeFriend(data) {
 return {
 lastTenPosts: data.lastTenPosts,
 birthday: data.birthday, 
 fullName: `${data.firstName} ${data.lastName}`,
 getThreeRandomPosts: function() {
 // get three random posts from this.lastTenPosts
 },
 getDaysUntilBirthday: function() {
 // use this.birthday to get the num days until birthday
 },
 greeting: function() {
 const numDays=this.getDaysUntilBirthday() 
 return `Hello, this is ${this.fullName}'s data! It is ${numDays} until ${this.fullName}'s birthday!`
 }
 };
}

現(xiàn)在，在 initializeFriend 執(zhí)行結(jié)束后，該對象需要的一切都位于對象本身的作用域之內(nèi)了。我們的方法不需要再依賴于閉包，它們只會用到對象本身包含的信息。

好吧，這是 this 的用法之一，但你說過 this 在不同的上下文中有不同的含義。那是什么意思？為什么不一定會指向?qū)ο笞约海?/p>

有時候，你需要將 this 指向某個特定的東西。一種情況就是事件處理函數(shù)。比如我們希望在用戶點擊好友時打開好友的 Facebook 首頁。我們會給對象添加下面的 onClick 方法：

function initializeFriend(data) {
 return {
 lastTenPosts: data.lastTenPosts,
 birthday: data.birthday,
 username: data.username, 
 fullName: `${data.firstName} ${data.lastName}`,
 getThreeRandomPosts: function() {
 // get three random posts from this.lastTenPosts
 },
 getDaysUntilBirthday: function() {
 // use this.birthday to get the num days until birthday
 },
 greeting: function() {
 const numDays=this.getDaysUntilBirthday() 
 return `Hello, this is ${this.fullName}'s data! It is ${numDays} until ${this.fullName}'s birthday!`
 },
 onFriendClick: function() {
 window.open(`https://facebook.com/${this.username}`)
 }
 };
}

注意我們在對象中添加了 username 屬性，這樣 onFriendClick 就能訪問它，從而在新窗口中打開該好友的 Facebook 首頁。現(xiàn)在只需要編寫 HTML：

<button id="Bob_Ross">
 <!-- A bunch of info associated with Bob Ross -->
</button> 

還有 JavaScript：

const bobRossObj=initializeFriend(data[0])
const bobRossDOMEl=document.getElementById('Bob_Ross')
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

在上述代碼中，我們給 Bob Ross 創(chuàng)建了一個對象。然后我們拿到了 Bob Ross 對應(yīng)的 DOM 元素。然后執(zhí)行 onFriendClick 方法來打開 Bob 的 Facebook 主頁。似乎沒問題，對吧？

有問題！

哪里出錯了？

注意我們調(diào)用 onclick 處理程序的代碼是 bobRossObj.onFriendClick。看到問題了嗎？要是寫成這樣的話能看出來嗎？

bobRossDOMEl.addEventListener("onclick", function() {
 window.open(`https://facebook.com/${this.username}`)
})

現(xiàn)在看到問題了嗎？如果把事件處理程序?qū)懗?bobRossObj.onFriendClick，實際上是把 bobRossObj.onFriendClick 上保存的函數(shù)拿出來，然后作為參數(shù)傳遞。它不再“依附”在 bobRossObj 上，也就是說，this 不再指向 bobRossObj。它實際指向全局對象，也就是說 this.username 不存在。似乎我們沒什么辦法了。

輪到綁定上場了！

7. 明確綁定 this

我們需要明確地將 this 綁定到 bobRossObj 上。我們可以通過 bind 實現(xiàn)：

const bobRossObj=initializeFriend(data[0])
const bobRossDOMEl=document.getElementById('Bob_Ross')
bobRossObj.onFriendClick=bobRossObj.onFriendClick.bind(bobRossObj)
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

之前，this 是按照默認(rèn)的規(guī)則設(shè)置的。但使用 bind 之后，我們明確地將 bobRossObj.onFriendClick 中的 this 的值設(shè)置為 bobRossObj 對象本身。

到此為止，我們看到了為什么要使用 this，以及為什么要明確地綁定 this。最后我們來介紹一下，this 實際上是箭頭函數(shù)。

8. 箭頭函數(shù)

你也許注意到了箭頭函數(shù)最近很流行。人們喜歡箭頭函數(shù)，因為很簡潔、很優(yōu)雅。而且你還知道箭頭函數(shù)和普通函數(shù)有點區(qū)別，盡管不太清楚具體區(qū)別是什么。

簡而言之，兩者的區(qū)別在于：

在定義箭頭函數(shù)時，不管 this 指向誰，箭頭函數(shù)內(nèi)部的 this 永遠(yuǎn)指向同一個東西。

嗯……這貌似沒什么用……似乎跟普通函數(shù)的行為一樣啊？

我們通過 initializeFriend 舉例說明。假設(shè)我們想添加一個名為 greeting 的函數(shù)：

function initializeFriend(data) {
 return {
 lastTenPosts: data.lastTenPosts,
 birthday: data.birthday,
 username: data.username, 
 fullName: `${data.firstName} ${data.lastName}`,
 getThreeRandomPosts: function() {
 // get three random posts from this.lastTenPosts
 },
 getDaysUntilBirthday: function() {
 // use this.birthday to get the num days until birthday
 },
 greeting: function() {
 function getLastPost() {
 return this.lastTenPosts[0]
 }
 const lastPost=getLastPost() 
 return `Hello, this is ${this.fullName}'s data!
 ${this.fullName}'s last post was ${lastPost}.`
 },
 onFriendClick: function() {
 window.open(`https://facebook.com/${this.username}`)
 }
 };
}

這樣能運行嗎？如果不能，怎樣修改才能運行？

答案是不能。因為 getLastPost 沒有在對象的上下文中調(diào)用，因此getLastPost 中的 this 按照默認(rèn)規(guī)則指向了全局對象。

你說沒有“在對象的上下文中調(diào)用”……難道它不是從 initializeFriend 返回的內(nèi)部調(diào)用的嗎？如果這還不叫“在對象的上下文中調(diào)用”，那我就不知道什么才算了。

我知道“在對象的上下文中調(diào)用”這個術(shù)語很模糊。也許，判斷函數(shù)是否“在對象的上下文中調(diào)用”的好方法就是檢查一遍函數(shù)的調(diào)用過程，看看是否有個對象“依附”到了函數(shù)上。

我們來檢查下執(zhí)行 bobRossObj.onFriendClick() 時的情況。“給我對象 bobRossObj，找到其中的 onFriendClick 然后調(diào)用該屬性對應(yīng)的函數(shù)”。

我們同樣檢查下執(zhí)行 getLastPost() 時的情況。“給我名為 getLastPost 的函數(shù)然后執(zhí)行。”看到了嗎？我們根本沒有提到對象。

好了，這里有個難題來測試你的理解程度。假設(shè)有個函數(shù)名為 functionCaller，它的功能就是調(diào)用一個函數(shù)：

functionCaller(fn) {
 fn()
}

如果調(diào)用 functionCaller(bobRossObj.onFriendClick) 會怎樣？你會認(rèn)為 onFriendClick 是“在對象的上下文中調(diào)用”的嗎？this.username有定義嗎？

我們來檢查一遍：“給我 bobRosObj 對象然后查找其屬性 onFriendClick。取出其中的值（這個值碰巧是個函數(shù)），然后將它傳遞給 functionCaller，取名為 fn。然后，執(zhí)行名為 fn 的函數(shù)。”注意該函數(shù)在調(diào)用之前已經(jīng)從 bobRossObj 對象上“脫離”了，因此并不是“在對象的上下文中調(diào)用”的，所以 this.username 沒有定義。

這時可以用箭頭函數(shù)解決這個問題：

function initializeFriend(data) {
 return {
 lastTenPosts: data.lastTenPosts,
 birthday: data.birthday,
 username: data.username, 
 fullName: `${data.firstName} ${data.lastName}`,
 getThreeRandomPosts: function() {
 // get three random posts from this.lastTenPosts
 },
 getDaysUntilBirthday: function() {
 // use this.birthday to get the num days until birthday
 },
 greeting: function() {
 const getLastPost=()=> {
 return this.lastTenPosts[0]
 }
 const lastPost=getLastPost() 
 return `Hello, this is ${this.fullName}'s data!
 ${this.fullName}'s last post was ${lastPost}.`
 },
 onFriendClick: function() {
 window.open(`https://facebook.com/${this.username}`)
 }
 };
}

上述代碼的規(guī)則是：

在定義箭頭函數(shù)時，不管 this 指向誰，箭頭函數(shù)內(nèi)部的 this 永遠(yuǎn)指向同一個東西。

箭頭函數(shù)是在 greeting 中定義的。我們知道，在 greeting 內(nèi)部的 this 指向?qū)ο蟊旧怼Ｒ虼耍^函數(shù)內(nèi)部的 this 也指向?qū)ο蟊旧恚@正是我們需要的結(jié)果。

9. 結(jié)論

this 有時很不好理解，但它對于開發(fā) JavaScript 應(yīng)用非常有用。本文當(dāng)然沒能介紹 this 的所有方面。一些沒有涉及到的話題包括：

• call 和 apply；
• 使用 new 時 this 會怎樣；
• 在 ES6 的 class 中 this 會怎樣。

我建議你首先問問自己在這些情況下的 this，然后在瀏覽器中執(zhí)行代碼來檢驗?zāi)愕慕Y(jié)果。

原文地址：https://mp.weixin.qq.com/s/L9eac6rzkSE_JqxXyg3FQw