文將通過簡單的術語和真實世界的例子解釋 JavaScript 中 this 及其用途，并告訴你寫出好的代碼為何如此重要。

1.this 適合你嗎？

我看到許多文章在介紹 JavaScript 的 this 時都會假設你學過某種面向對象的編程語言，比如 Java、C++ 或 Python 等。但這篇文章面向的讀者是那些不知道 this 是什么的人。我盡量不用任何術語來解釋 this 是什么，以及 this 的用法。

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

在深入介紹 this 之前，我們首先需要理解函數式編程和面向對象編程之間的區別。

2.函數式編程 vs 面向對象編程

你可能不知道，JavaScript 同時擁有面向對象和函數式的結構，所以你可以自己選擇用哪種風格，或者兩者都用。

我在很早以前使用 JavaScript 時就喜歡函數式編程，而且會像躲避瘟疫一樣避開面向對象編程，因為我不理解面向對象中的關鍵字，比如 this。我不知道為什么要用 this。似乎沒有它我也可以做好所有的工作。

而且我是對的。

在某種意義上 。也許你可以只專注于一種結構并且完全忽略另一種，但這樣你只能是一個 JavaScript 開發者。為了解釋函數式和面向對象之間的區別，下面我們通過一個數組來舉例說明，數組的內容是 Facebook 的好友列表。

假設你要做一個 Web 應用，當用戶使用 Facebook 登錄你的 Web 應用時，需要顯示他們的 Facebook 的好友信息。你需要訪問 Facebook 并獲得用戶的好友數據。這些數據可能是 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', ...],
 },
 ...
]

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

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

3.函數式方式

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

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

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

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

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

4.面向對象的方式

對于編程初學者和 JavaScript 初學者，面向對象的概念可能有點難以理解。其思想是，我們要將每個好友變成一個對象，這個對象能夠生成你一切開發者需要的東西。

你可以創建一個對象，這個對象對應于某個好友，它有 fullName 屬性，還有兩個函數 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

面向對象的方式就是為數據創建對象，每個對象都有自己的狀態，并且包含必要的信息，能夠生成需要的數據。

5.這跟 this 有什么關系？

你也許從來沒想過要寫上面的 initializeFriend 代碼，而且你也許認為，這種代碼可能會很有用。但你也注意到，這并不是真正的面向對象。

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

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

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 中的一切變量，但不能訪問這個對象本身的屬性或方法。當然你會問，

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

當然可以。但要是想在 greeting 中加入距離好友生日的天數怎么辦？我們最好還是有辦法在 greeting 中調用 getDaysUntilBirthday。

這時輪到 this 出場了！

6.終于——this 是什么

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

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

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

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

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

附注：不要在全局作用域的普通函數或另一個函數的作用域中使用 this！this 是個面向對象的東西，它只在對象的上下文（或類的上下文）中有意義。

我們利用 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!`
 }
 };
}

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

好吧，這是 this 的用法之一，但你說過 this 在不同的上下文中有不同的含義。那是什么意思？為什么不一定會指向對象自己？

有時候，你需要將 this 指向某個特定的東西。一種情況就是事件處理函數。比如我們希望在用戶點擊好友時打開好友的 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 首頁。現在只需要編寫 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 創建了一個對象。然后我們拿到了 Bob Ross 對應的 DOM 元素。然后執行 onFriendClick 方法來打開 Bob 的 Facebook 主頁。似乎沒問題，對吧？

有問題！

哪里出錯了？

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

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

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

輪到綁定上場了！

7.明確綁定 this

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

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

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

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

8.箭頭函數

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

簡而言之，兩者的區別在于：

在定義箭頭函數時，不管 this 指向誰，箭頭函數內部的 this 永遠指向同一個東西。

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

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

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 沒有在對象的上下文中調用，因此getLastPost 中的 this 按照默認規則指向了全局對象。

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

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

我們來檢查下執行 bobRossObj.onFriendClick() 時的情況。“給我對象 bobRossObj，找到其中的 onFriendClick 然后調用該屬性對應的函數”。

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

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

functionCaller(fn) {
 fn()
}

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

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

這時可以用箭頭函數解決這個問題：

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}`)
 }
 };
}

上述代碼的規則是：

在定義箭頭函數時，不管 this 指向誰，箭頭函數內部的 this 永遠指向同一個東西。

箭頭函數是在 greeting 中定義的。我們知道，在 greeting 內部的 this 指向對象本身。因此，箭頭函數內部的 this 也指向對象本身，這正是我們需要的結果。

9.結論

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

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

我建議你首先問問自己在這些情況下的 this，然后在瀏覽器中執行代碼來檢驗你的結果。

想學習更多關 于this 的內容，可參考《你不知道的 JS：this 和對象原型》：

• https://github.com/getify/You-Dont-Know-JS/tree/master/this%20%26%20object%20prototypes

如果你想測試自己的知識，可參考《你不知道的JS練習：this和對象原型》：

• https://ydkjs-exercises.com/this-object-prototypes

原文：https://medium.freecodecamp.org/a-deep-dive-into-this-in-javascript-why-its-critical-to-writing-good-code-7dca7eb489e7

作者：Austin Tackaberry，Human API 的軟件工程師

譯者：彎月，責編：屠敏

TML使用哪個編輯器好嗎？

一開始學前端基礎HTML我們就需要準備一下，我們需要HTML編輯器來編寫制作我們的HTML頁面，寫這個網頁HTML的工具，一般常用的工具分兩種：notepad++和Adobe Dreamweaver

阿景就給你介紹第一個notepad++編輯器，也是最好用最方便的一個編輯器：

分享之前我還是要推薦下我自己的前端學習群：661473108，不管你是小白還是大牛，小編都歡迎，不管前端有什么不懂的，或者不知道怎么學習的都可以來，歡迎初學和進階中的小伙伴。

操作步驟：

1、到百度下載一個notepad++編輯器軟件，然后在電腦上安裝，安裝完成運行notepad++編輯器軟件

2、打開notepad++，notepad++編輯器會自動新建一個文檔，如圖：

圖片

3、文件另存為的格式是選html的格式，如圖：

圖片

圖片

4、新建成功一個HTML文件，如圖：（文檔取名例如“阿景前端”）

圖片

上圖及步驟已經做好了一個HTML文件，那我們來測試一下我們的第一個頁面，那么我們就需要填寫代碼內容，代碼內容如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>阿景前端教程</title>

</head>

<body>

<h1>我的第一個標題</h1>

<p>我的第一個段落。</p>

</body>

</html>

圖片展示：

圖片

圖片

到了這一步，我們的編輯器選擇下載好了，頁面也制作成功了，那么本章節就到這里了！

本文轉載于：http://web.gzseoaj.com/html/2.html