JavaScript 詳解：為什么寫好的代碼非常重要

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

1.this 適合你嗎？

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

也許你一直不敢解開 this 的秘密，因為它看起來挺奇怪也挺嚇人的?；蛟S你只在 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 獲得的?，F在需要將其轉換成方便你的項目使用的格式。我們假設你想顯示的好友信息如下：

姓名，格式為`${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 首頁?，F在只需要編寫 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() 時的情況?！敖o我對象 bobRossObj，找到其中的 onFriendClick 然后調用該屬性對應的函數”。

我們同樣檢查下執行 getLastPost() 時的情況?！敖o我名為 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 的軟件工程師
譯者：彎月，責編：屠敏

言

HTML作為前端三大基礎知識點之一，是每一個前端開發人員都要掌握的部分。今天這篇文章我們來看看一些平時不太會注意，卻在面試時可能會問到的題目，來看看你都會嗎？

HTML

如何使用div模擬實現textarea？

我們都知道textarea是form表單中一個很常見的元素，用于多行文本輸入，可以設置行數和列數。

但是默認的textarea樣式在頁面上看起來是很丑的，很多頁面都是采用div模擬textarea實現。例如QQ空間主頁面的發表說說，在你看頁面源碼后就會發現這個輸入框其實是一個div元素，并不是一個textarea元素，現在我們就來看看這是如何實現的吧？

首先來看看實現的效果是什么樣的。

實現效果

關鍵屬性：contenteditable

正如這個屬性的字面意思，可以理解為可編輯的，如果在頁面標簽上設置contenteditable=true，該標簽就可以進行編輯了。

可以配合user-modify屬性，該屬性表示的是控制用戶能否對頁面元素進行編輯，通過設置不同的值可以選擇富文本或者純文本內容，但是由于該屬性是非標準屬性，很少有人知道。

首先我們來看看頁面的HTML部分代碼，就是一個很簡單的div標簽，然后設置contenteditable屬性為true。

HTML部分代碼

接下來我們就看看整個CSS代碼的完整實現吧。

CSS樣式

通過min-height和max-height屬性可以控制div的高度，在內容超出max-height后會出現滾動條。如果想要固定div的高度，則只需要設置height屬性就可以，而不用設置min-height和max-height屬性。

src和href的區別

src和href從使用上來看都是對外部資源的一種引用，但是在具體理解上是有差異的。

href的值指定的是資源在網絡上的位置，定義的是當前頁面上的某個元素與需要的資源文件的一個鏈接。比如下面一個語句。

href引用

當瀏覽器解析到頁面的這條語句時，會知道在這里引用了一個外部樣式文件，但并不會阻止頁面解析。這與@import有很大不同，因此在引入外部樣式時，推薦使用link標簽。

src的值表示的是頁面上必不可少的內容，需要將指定內容加載到當前頁面中。比如下面一個語句。

src引用

當瀏覽器解析到頁面上的這條語句時，瀏覽器會對這個文件進行解析，編譯和執行，從而導致整個頁面加載會被暫停，這也是為什么一般會選擇將script標簽放在body結束標簽的前面。

有一種更好的理解方式，href表示的是一個資源的鏈接；src是對當前元素的替換，內容最終會嵌入到當前頁面中。

DIV+CSS布局和Table布局對比

雖然目前大多數網頁都是采用的DIV+CSS布局的方式，但是也有少數的老式Web網頁采用的是Table布局，我們可以一起來看看兩種布局方式的優劣。

布局對比

div+css布局

div+css的布局方式屬于W3C標準，而且由于CSS的存在，HTML部分的代碼會顯得很純凈，滿足行為，樣式，結構分離的原則。
頁面加載速度更快，這是目前DIV+CSS使用更廣泛的一個非常重要的原因。
頁面編碼量相對于Table布局會少很多。
頁面內容更容易維護，由于樣式都存在CSS文件中，只需要修改CSS文件即可，對HTML文件不會有影響。
由于DIV+CSS布局更容易進行SEO優化，所以更方便被搜索引擎收錄。

Table布局

雖然DIV+CSS有各種各樣的優勢，但是Table布局也并不是完全無用的。這里也可以列舉出幾個采用Table布局的優勢。

新手學習方便（相信有很多后端RD在進行前端學習時剛開始都是從table布局開始的）。
兼容性更好，由于Table布局是從最古老的瀏覽器發展而來的，在兼容性上會滿足所有瀏覽器。而CSS3的出現卻要考慮瀏覽器的支持程度，一個樣式要考慮加上幾個不同瀏覽器前綴，類似于-webkit，-moz等

結束語

今天這篇文章主要講解了幾個關于HTML的知識點，大家都掌握了嗎？

TML 代碼約定

很多 Web 開發人員對 HTML 的代碼規范知之甚少。

在2000年至2010年，許多Web開發人員從 HTML 轉換到 XHTML。

使用 XHTML 開發人員逐漸養成了比較好的 HTML 編寫規范。

而針對于 HTML5 ，我們應該形成比較好的代碼規范，以下提供了幾種規范的建議。

使用正確的文檔類型

文檔類型聲明位于HTML文檔的第一行：

<!DOCTYPE html>

如果你想跟其他標簽一樣使用小寫，可以使用以下代碼：

<!doctype html>

使用小寫元素名

HTML5 元素名可以使用大寫和小寫字母。

推薦使用小寫字母：

混合了大小寫的風格是非常糟糕的。
開發人員通常使用小寫 (類似 XHTML)。
小寫風格看起來更加清爽。
小寫字母容易編寫。

不推薦:

<p>這是一個段落。</p>

</SECTION>

非常糟糕: