目錄

第 1部分　熱身

第 1章 無(wú)處不在的

JavaScript　3

1.1 理解JavaScript語(yǔ)言　4

1.1.1 JavaScript是如何發(fā)展

的　5

1.1.2 如今的轉(zhuǎn)換編譯器已經(jīng)能

讓我們體驗(yàn)未來(lái)的

JavaScript　6

1.2 理解瀏覽器　6

1.3 使用當(dāng)前的最佳實(shí)踐　7

1.3.1 調(diào)試　8

1.3.2 測(cè)試　8

1.3.3 性能分析　9

1.4 提高跨平臺(tái)開(kāi)發(fā)能力　10

1.5 小結(jié)　11

第2章 運(yùn)行時(shí)的頁(yè)面構(gòu)建

過(guò)程　13

2.1 生命周期概覽　14

2.2 頁(yè)面構(gòu)建階段　17

2.2.1 HTML解析和DOM

構(gòu)建　18

2.2.2 執(zhí)行JavaScript代碼　19

2.3 事件處理　23

2.3.1　事件處理器概覽 23

2.3.2 注冊(cè)事件處理器　25

2.3.3 處理事件　26

2.4 小結(jié)　28

2.5 練習(xí)　29



第2部分　理解函數(shù)



第3章 新手的第一堂函數(shù)

課：定義與參數(shù)　33

3.1 函數(shù)式的不同點(diǎn)到底是什么　34

3.1.1 函數(shù)是第一類(lèi)對(duì)象　35

3.1.2 回調(diào)函數(shù)　36

3.2 函數(shù)作為對(duì)象的樂(lè)趣　39

3.2.1 存儲(chǔ)函數(shù)　40

3.2.2 自記憶函數(shù)　41

3.3 函數(shù)定義　43

3.3.1 函數(shù)聲明和函數(shù)表達(dá)

式　44

3.3.2 箭頭函數(shù)　48

3.4 函數(shù)的實(shí)參和形參　50

3.4.1 剩余參數(shù)　52

3.4.2 默認(rèn)參數(shù)　53

3.5 小結(jié)　56

3.6 練習(xí)　57



第4章 函數(shù)進(jìn)階：理解函數(shù)

調(diào)用　59

4.1 使用隱式函數(shù)參數(shù)　60

4.1.1 arguments參數(shù)　60

4.1.2 this參數(shù)：函數(shù)上下文　65

4.2 函數(shù)調(diào)用　65

4.2.1 作為函數(shù)直接被

調(diào)用　66

4.2.2 作為方法被調(diào)用　67

4.2.3 作為構(gòu)造函數(shù)調(diào)用　70

4.2.4 使用apply和call方法

調(diào)用　75

4.3 解決函數(shù)上下文的

問(wèn)題　81

4.3.1 使用箭頭函數(shù)繞過(guò)函數(shù)上下文　81

4.3.2 使用bind方法　85

4.4 小結(jié)　86

4.5 練習(xí)　86

第5章 精通函數(shù)：閉包和

作用域　89

5.1 理解閉包　90

5.2 使用閉包　93

5.2.1 封裝私有變量　93

5.2.2 回調(diào)函數(shù)　95

5.3 通過(guò)執(zhí)行上下文來(lái)跟蹤

代碼　98

5.4 使用詞法環(huán)境跟蹤變量的作用域　101

5.4.1 代碼嵌套　101

5.4.2 代碼嵌套與詞法環(huán)境　102

5.5 理解JavaScript的變量

類(lèi)型　104

5.5.1 變量可變性　104

5.5.2 定義變量的關(guān)鍵字與詞法環(huán)境　107

5.5.3 在詞法環(huán)境中注冊(cè)標(biāo)

識(shí)符　111

5.6 研究閉包的工作

原理　114

5.6.1 回顧使用閉包模擬私有變量的代碼　115

5.6.2 私有變量的警告　118

5.6.3 回顧閉包和回調(diào)函數(shù)的

例子　119

5.7 小結(jié)　122

5.8 練習(xí)　122

第6章 未來(lái)的函數(shù)：生成器和

promise　125

6.1 使用生成器和promise編寫(xiě)優(yōu)雅的異步代碼　126

6.2 使用生成器函數(shù)　127

6.2.1 通過(guò)迭代器對(duì)象控制

生成器　129

6.2.2 使用生成器　133

6.2.3 與生成器交互　136

6.2.4 探索生成器內(nèi)部

構(gòu)成　139

6.3 使用promise　145

6.3.1 理解簡(jiǎn)單回調(diào)函數(shù)所帶來(lái)的問(wèn)題　146

6.3.2 深入研究promise　149

6.3.3 拒絕promise　151

6.3.4 創(chuàng)建第一個(gè)真實(shí)promise

案例　153

6.3.5 鏈?zhǔn)秸{(diào)用promise　155

6.3.6 等待多個(gè)promise　156

6.3.7 promise競(jìng)賽　156

6.4 把生成器和promise相

結(jié)合　157

6.5 小結(jié)　161

6.6 練習(xí)　161



第3部分　深入鉆研對(duì)象，強(qiáng)化代碼



第7章 面向?qū)ο笈c原型　167

7.1 理解原型　168

7.2 對(duì)象構(gòu)造器與原型　171

7.2.1 實(shí)例屬性　173

7.2.2 JavaScript動(dòng)態(tài)特性的副作用　176

7.2.3 通過(guò)構(gòu)造函數(shù)實(shí)現(xiàn)對(duì)象類(lèi)型　179

7.3 實(shí)現(xiàn)繼承　180

7.3.1 重寫(xiě)constructor屬性的

問(wèn)題　184

7.3.2 instanceof操作符　187

7.4 在ES6使用JavaScript的class　189

7.4.1 使用關(guān)鍵字class　190

7.4.2 實(shí)現(xiàn)繼承　193

7.5 小結(jié)　195

7.6 練習(xí)　196

第8章 控制對(duì)象的訪問(wèn)　199

8.1 使用getter與setter控制屬性訪問(wèn)　200

8.1.1 定義getter和setter　201

8.1.2 使用getter與setter校驗(yàn)屬性值　207

8.1.3 使用getter與setter定義如何計(jì)算屬性值　208

8.2 使用代理控制訪問(wèn)　210

8.2.1 使用代理記錄日志　213

8.2.2 使用代理檢測(cè)性能　215

8.2.3 使用代理自動(dòng)填充

屬性　216

8.2.4 使用代理實(shí)現(xiàn)負(fù)數(shù)組

索引　218

8.2.5 代理的性能消耗　220

8.3 小結(jié)　221

8.4 練習(xí)　222

第9章 處理集合　225

9.1 數(shù)組　225

9.1.1 創(chuàng)建數(shù)組　226

9.1.2 在數(shù)組兩端添加、刪除

元素　228

9.1.3 在數(shù)組任意位置添加、刪除元素　230

9.1.4 數(shù)組常用操作　232

9.1.5 復(fù)用內(nèi)置的數(shù)組函數(shù)　243

9.2 Map　244

9.2.1 別把對(duì)象當(dāng)做Map　245

9.2.2 創(chuàng)建map　248

9.2.3 遍歷map　250

9.3 Set　251

9.3.1 創(chuàng)建Set　253

9.3.2 并集　254

9.3.3 交集　255

9.3.4 差集　256

9.4 小結(jié)　256

9.5 練習(xí)　257

第10章 正則表達(dá)式　259

10.1 為什么需要正則

表達(dá)式　260

10.2 正則表達(dá)式進(jìn)階　261

10.2.1 正則表達(dá)式說(shuō)明　261

10.2.2 術(shù)語(yǔ)和操作符　262

10.3 編譯正則表達(dá)式　266

10.4 捕獲匹配的片段　268

10.4.1 執(zhí)行簡(jiǎn)單捕獲　268

10.4.2 使用全局表達(dá)式進(jìn)行

匹配　270

10.4.3 捕獲的引用　271

10.4.4 未捕獲的分組　272

10.5 利用函數(shù)進(jìn)行替換　273

10.6 使用正則表達(dá)式解決常

見(jiàn)的問(wèn)題　275

10.6.1 匹配換行　275

10.6.2 匹配Unicode字符　276

10.6.3 匹配轉(zhuǎn)義字符　276

10.7 小結(jié)　277

10.8 練習(xí)　278

第11章 代碼模塊化　281

11.1 在JavaScript ES6之前的

版本中模塊化代碼　282

11.1.1 使用對(duì)象、閉包和立即執(zhí)

行函數(shù)實(shí)現(xiàn)模塊　282

11.1.2 使用AMD和CommonJS

模塊化JavaScript

應(yīng)用　289

11.2 ES6模塊　291

11.3 小結(jié)　297

11.4 練習(xí)　298



第4部分　洞悉瀏覽器



第12章 DOM操作　303

12.1 向DOM中注入

HTML　304

12.1.1 將HTML字符串轉(zhuǎn)換

成DOM　305

12.1.2 將DOM元素插入到文檔

中　309

12.2 DOM的特性和

屬性　311

12.3 令人頭疼的樣式

特性　313

12.3.1 樣式在何處　314

12.3.2 樣式屬性命名　316

12.3.3 獲取計(jì)算后樣式　317

12.3.4 轉(zhuǎn)換像素值　320

12.3.5 測(cè)量元素的高度和

寬度　321

12.4 避免布局抖動(dòng)　326

12.5 小結(jié)　328

12.6 練習(xí)　329

第13章 歷久彌新的事件　331

13.1 深入事件循環(huán)　332

13.1.1 僅含宏任務(wù)的示例　335

13.1.2 同時(shí)含有宏任務(wù)和微任務(wù)

的示例　338

13.2 玩轉(zhuǎn)計(jì)時(shí)器：延遲執(zhí)行和

間隔執(zhí)行　342

13.2.1 在事件循環(huán)中執(zhí)行計(jì)

時(shí)器　343

13.2.2 處理計(jì)算復(fù)雜度高的

任務(wù)　348

13.3 處理事件　351

13.3.1 通過(guò)DOM代理事件　352

13.3.2 自定義事件　358

13.4 小結(jié)　361

13.5 練習(xí)　362

第14章 跨瀏覽器開(kāi)發(fā)

技巧　365

14.1 跨瀏覽器注意事項(xiàng)　366

14.2 五大開(kāi)發(fā)問(wèn)題　368

14.2.1 瀏覽器的bug和

差異　369

14.2.2 瀏覽器的bug修復(fù)　369

14.2.3 外部代碼和標(biāo)記　370

14.2.4 回歸　373

14.3 實(shí)現(xiàn)策略　374

14.3.1 安全的跨瀏覽器修復(fù)

方法　375

14.3.2 特性檢測(cè)和墊片　375

14.3.3 不可測(cè)試的瀏覽器

問(wèn)題　378

14.4 減少假設(shè)　379

14.5 小結(jié)　380

14.6 練習(xí)　381

附錄A ES6附加特性　383

附錄B 測(cè)試與調(diào)試的武器　389

附錄C 習(xí)題答案　407