摘要：最近剛剛看完了你不知道的上卷，對有了更進(jìn)一步的了解。你不知道的上卷由兩部分組成，第一部分是作用域和閉包，第二部分是和對象原型。附錄詞法這一章并沒有說明機(jī)制，只是介紹了中的箭頭函數(shù)引入的行為詞法。第章混合對象類類理論類的機(jī)制類的繼承混入。

最近剛剛看完了《你不知道的 JavaScript》上卷，對 JavaScript 有了更進(jìn)一步的了解。

《你不知道的 JavaScript》上卷由兩部分組成，第一部分是《作用域和閉包》，第二部分是《this 和對象原型》。下面我會按照簡單介紹一下每一章的主要內(nèi)容及閱讀感受。

第一部分《作用域和閉包》

編譯原理：簡單介紹分詞/詞法分析、解析/語法分析、代碼生成的概念；

理解作用域：介紹引擎、編譯器、作用域之間的關(guān)系；

作用域嵌套。

在這一章節(jié)中，作者通過引擎、編譯器、作用域之間的對話，將這三者之間的關(guān)系及作用生動(dòng)形象地展現(xiàn)出來，并引出了 LHS 查詢和 RHS 查詢的概念。

詞法作用域及其相關(guān)概念；

欺騙詞法的方式：

在代碼運(yùn)行時(shí)修改詞法作用域，如 eval()；

在代碼運(yùn)行時(shí)創(chuàng)建新的詞法作用域，如 with。

這一章作者介紹了詞法作用域以及欺騙詞法的方式。說來慚愧，在看這章之前，我完全沒聽說過「詞法作用域」這個(gè)概念，一開始我還以為是個(gè)很高大上的東西，看完之后你會覺得其實(shí)也沒什么，就是你平時(shí)都在寫的東西，只不過你沒有留意而已。

函數(shù)作用域：函數(shù)聲明和函數(shù)表達(dá)式的區(qū)別、具名函數(shù)和匿名函數(shù)；

塊作用域：with、try/catch、let、const。

這一章作者介紹了 JavaScript 中的函數(shù)作用域及塊作用域，講了函數(shù)聲明和函數(shù)表達(dá)式的區(qū)別，其實(shí)很簡單，就是看 function 這個(gè)關(guān)鍵字是否是在聲明中的第一個(gè)詞，如果是，那就是函數(shù)聲明，否則就是函數(shù)表達(dá)式。另外，作者還簡單地介紹了下 ES6 中具有塊作用域作用的 let 和 const 關(guān)鍵字。

在這之前，我一直以為 ES6 之前是沒有塊作用域的，只有全局作用域和函數(shù)作用域，看完這章之后，我才知道其實(shí)在 ES3 的時(shí)候就有塊作用域了。比如，with 。再比如，try/catch 中的 catch，一般我們是這樣寫的：

try {
    // do something
} catch (err) {
    console.log(err)
}

其中這個(gè) err 只存在 catch 分句內(nèi)部，從別處引用時(shí)會拋出錯(cuò)誤。這不就是塊作用域嗎？

這一章節(jié)作者簡單地介紹了一下變量聲明提升和函數(shù)聲明提升。沒什么好說的，需要注意的是函數(shù)表達(dá)式是賦值操作，并不會提升。

閉包；

作用域和閉包；

模塊機(jī)制。

閉包是 JavaScript 中的一大難點(diǎn)，在這章中作者用了 4 個(gè)小節(jié)來介紹閉包，還有 1 個(gè)小節(jié)來介紹模塊機(jī)制。不要看閉包有四個(gè)小節(jié)，其實(shí)也不過 8 頁而已，核心的文字加起來也就 2 頁，但就是這短短的 2 頁，就把閉包給講得非常清楚。

下面是書中給出關(guān)于閉包的定義：

當(dāng)函數(shù)可以記住并訪問所在的詞法作用域時(shí)，就產(chǎn)生了閉包，即使函數(shù)是在當(dāng)前詞法作用域之外執(zhí)行。

看了是不是還是不懂，沒關(guān)系，讓我們來提取關(guān)鍵字：

函數(shù)；

記住并訪問所在的詞法作用域；

當(dāng)前詞法作用域之外執(zhí)行。

再來看下書中的一段代碼，看完之后再結(jié)合書中的定義來理解，我相信你對閉包肯定會有更進(jìn)一步的理解。

function foo() {
    var a = 2;

    function bar() {
        console.log(a);
    }

    return bar;
}

var baz = foo();

baz(); // 2 —— 朋友，這就是閉包的效果。

下面結(jié)合我們剛剛提取的關(guān)鍵字來理解。

函數(shù)。這里的函數(shù)是 bar() ；

記住并訪問。 bar() 當(dāng)前所在的詞法作用域是 foo() 的函數(shù)作用域。bar() 的詞法作用域能夠訪問 foo() 的內(nèi)部作用域。

當(dāng)前詞法作用域之外執(zhí)行。在上面的代碼中，我們將函數(shù) bar() 當(dāng)做一個(gè)值類型傳遞給外部，在這句代碼中 var baz = foo();，我們將 foo() 的返回值（也就是 bar()）賦值給變量 baz 并調(diào)用 baz()，實(shí)際上就是調(diào)用 bar()。上面第 2 點(diǎn)里我們說了，bar() 的作用域是 foo() 的函數(shù)作用域，但是，在這里，它卻是在自己定義的詞法作用域以外的地方執(zhí)行。

怎么樣，通過上面的分析，是不是對閉包有了進(jìn)一步的理解了。

作者在這一章中簡單地分析了下動(dòng)態(tài)作用域，并通過一小段代碼將它與詞法作用域做了對比。詞法作用域與動(dòng)態(tài)作用域的主要區(qū)別在于：詞法作用域是在定義時(shí)確定的，而動(dòng)態(tài)作用域是在運(yùn)行時(shí)確定的。

這一章簡單地介紹了塊作用域的替代方案 Traceur，以及因此可能會帶來的性能問題。

這一章并沒有說明 this 機(jī)制 ，只是介紹了 ES6 中的箭頭函數(shù)引入的行為 —— this 詞法。關(guān)于 this 機(jī)制的詳細(xì)說明是在第二部分《this 和對象原型》中的第 1 章和 第 2 章。

這一章作者致謝了一大堆的人，光人名的排版就占了兩頁多，說真的，我都懷疑是不是在湊字?jǐn)?shù)了（純調(diào)侃，沒別的意思）。

第二部分《this 和對象原型》

this 的指向；

this 的作用域。

這一章中作者先是提出我們「為什么要使用 this？」這個(gè)問題，然后再指出「this 到底是什么？」，為第 2 章做鋪墊。

這一章我個(gè)人認(rèn)為最核心的就是兩句話。第一句是「當(dāng)一個(gè)函數(shù)被調(diào)用時(shí)，會創(chuàng)建一個(gè)活動(dòng)記錄（有時(shí)也稱為執(zhí)行上下文）。這個(gè)記錄會包含函數(shù)在哪里被調(diào)用（調(diào)用棧）、函數(shù)的調(diào)用方式、傳入的參數(shù)等信息。this 就是這個(gè)記錄的一個(gè)屬性，會在函數(shù)執(zhí)行的過程中用到」。也就是說，this 是活動(dòng)記錄里的一個(gè)屬性，與函數(shù)執(zhí)行的過程有關(guān)。

第二句話是「this 實(shí)際上是函數(shù)被調(diào)用時(shí)發(fā)生的綁定，它指向什么完全取決于函數(shù)在哪里被調(diào)用。」。第 2 章實(shí)際上就是在講這個(gè)綁定。

調(diào)用位置；

綁定規(guī)則：

默認(rèn)綁定；

隱式綁定；

顯式綁定：call()、apply()、bind()；

new 綁定；

箭頭函數(shù)的綁定；

一些例外的綁定。

綁定規(guī)則的優(yōu)先級。

作者在這一章中全面介紹了 this 的綁定規(guī)則。

要弄清楚 this 的綁定對象，需要明白以下兩點(diǎn)：

調(diào)用位置

綁定規(guī)則

什么是調(diào)用位置？簡單來說，就是函數(shù)在代碼中被調(diào)用的位置。為了找到調(diào)用位置，我們需要分析調(diào)用棧，也就是為了到達(dá)當(dāng)前執(zhí)行位置所調(diào)用的所有函數(shù)，而調(diào)用位置就在當(dāng)前正在執(zhí)行的函數(shù)的前一個(gè)調(diào)用中。

而綁定規(guī)則就是說 this 綁定的對象是有規(guī)則的，并且這些規(guī)則是有優(yōu)先級的，總的來說有下面四點(diǎn)：

由 new 調(diào)用的，綁定到新創(chuàng)建的對象；

由 call、apply、bind 調(diào)用的，綁定到指定的對象；

由上下文對象調(diào)用的，綁定到該上下文對象；

默認(rèn)的，在嚴(yán)格模式下綁定到 undefined，在非嚴(yán)格模式下綁定到全局對象。

當(dāng)然了，ES6 中新增的箭頭函數(shù)并不在這四條規(guī)則里面，而是繼承外層第一個(gè)非箭頭函數(shù)調(diào)用的 this 綁定。

在看這一章之前，我對 this 一知半解，網(wǎng)上找的答案也是五花八門，根本不知道哪個(gè)對哪個(gè)錯(cuò)。在看完這一章之后，我算是對 this 的所綁定的對象有了較為清晰的認(rèn)識，以后再遇到類似的問題時(shí)，直接套用上面的規(guī)則就可以了。

JavaScript 中的數(shù)據(jù)類型；

內(nèi)置對象；

對象屬性與方法；

數(shù)組；

對象復(fù)制；

屬性描述符；

[[Get]] 操作與 [[Put]] 操作；

Getter 和 Setter；

遍歷及 ES6 中的 Symbol.iterator。

這一章講到了很多平時(shí)我并沒有注意到的東西，比如，一般來說，我們使用數(shù)組的時(shí)候都是下標(biāo)/值對，但是，給數(shù)組添加屬性居然也是可以，雖然這并不會改變數(shù)組的長度。當(dāng)我看到這一部分的內(nèi)容時(shí)心里在想：我去，這是什么騷操作？這樣居然也可以？后面想了想，數(shù)組其實(shí)也是對象，是一個(gè)特殊的對象，從這一方面來說也是行得通的；再比如，屬性訪問與賦值時(shí)發(fā)生的 [[Get]] 操作與 [[Put]] 操作，能夠更好地了解其工作原理；還有，我們可以利用 ES6 中的 Iterator 接口實(shí)現(xiàn)自己的迭代邏輯。

類理論；

類的機(jī)制；

類的繼承；

混入。

這一章講到了 “類” 這一設(shè)計(jì)模式，以及 JavaScript 中各種實(shí)現(xiàn)這一模式的方法。

這一章的核心就是：類的本質(zhì)是復(fù)制，多態(tài)和繼承也是。這一點(diǎn)很重要，JavaScript 中也有類，但是兩者的本質(zhì)是不同的，這一點(diǎn)在《第 5 章 原型》和《第 6 章 行為委托》里面有詳細(xì)的說明。

這一章一開始看的時(shí)候我是很模糊的，因?yàn)樽鳛橐幻?JavaScript 開發(fā)者，說實(shí)話我對于 “類” 這個(gè)東西的理解不是很明白，所以我跳過了這一章，等到看完了后面三章之后再回過來看，瞬間感覺清晰很多了。

[[Prototype]] 屬性；

屬性設(shè)置和屏蔽；

JavaScript 中的 “類”；

（原型）繼承；

對象關(guān)聯(lián)。

這一章中，第一小節(jié)的 [[Prototype]] 屬性可以和第 3 章中的 [[Put]] 操作結(jié)合一起看，這樣能夠完整的了解屬性賦值的工作原理；屬性設(shè)置和屏蔽這一部分可以和第 4 章結(jié)合著閱讀，以便更好地了解 JavaScript 中的類與其它語言中的類的區(qū)別。

這一章作者主要從類理論與委托理論（其實(shí)也就是對象關(guān)聯(lián)）兩種不同的設(shè)計(jì)模式來介紹他們之間在代碼上實(shí)現(xiàn)的不同，可以看做是第 4 章和第 5 章的對象關(guān)聯(lián)的實(shí)踐部分。

這一章作者分析了 ES6 中新增的 Class 語法的優(yōu)點(diǎn)與缺點(diǎn)。

全書感悟

以上就是本書中的一些主要內(nèi)容介紹，我寫得比較簡單，其實(shí)書中還有很多比較細(xì)小的東西，有興趣的同學(xué)可以去買來看看?？偟膩碚f，這本書還是挺不錯(cuò)的，能讓你學(xué)到一些平時(shí)沒有注意到的東西，作者偏向于用口語化的文字來介紹知識點(diǎn)，不會顯得枯燥。

最后，拋塊磚，希望能引塊玉。下面是我在閱讀本書過程中的做的思維導(dǎo)圖。導(dǎo)圖的內(nèi)容比較多，不是很簡潔，因?yàn)槲蚁ＭM量把書中作者提到的概念提取出來，所以可能會顯得比較啰嗦。

最后，歡迎關(guān)注我的微信公眾號：前端路漫慢。