JavaScript 高級編程權威指南

1 邂逅JavaScript高級編程 1
1.1 前端開發需要掌握的三大技術 1
1.2 JavaScript的重要性 2
1.2.1 JavaScript的廣泛應用 2
1.2.2 JavaScript中讓人迷惑的知識點 4
1.3 TypeScript會取代JavaScript嗎 4
1.3.1 JavaScript的發展歷程 5
1.3.2 JavaScript是一門編程語言 5
1.4 編程語言之間的不同之處 6
1.4.1 機器語言 6
1.4.2 匯編語言 6
1.4.3 高級語言 6
後續預告 7
2 認識瀏覽器 8
2.1 瀏覽器的工作原理 8
2.2 認識瀏覽器內核 12
2.2.1 什麼是瀏覽器內核 12
2.2.2 常見的瀏覽器內核 12
2.3 渲染引擎的工作流程 13
2.3.1 HTML文件的解析過程 14
2.3.2 生成CSS規則 15
2.3.3 構建渲染樹 15
2.3.4 布局與繪制 16
2.3.5 回流與重繪 16
2.3.6 合成 18
後續預告 18
3 V8引擎的運行原理 19
3.1 認識JavaScript引擎 19
3.1.1 什麼是JavaScript引擎 19
3.1.2 瀏覽器內核與JS引擎的關系 20
3.2 V8引擎的原理與處理流程 20
3.3 V8引擎的架構設計 23
3.4 V8的代碼轉化過程 25
3.4.1 詞法分析的過程 26
3.4.2 語法分析的過程 27
3.4.3 轉化的字節碼 28
3.4.4 生成的機器碼 29
後續預告 30
4 V8引擎的內存管理 31
4.1 認識內存管理 31
4.2 執行上下文棧 32
4.3 JavaScript引擎的執行過程 33
4.3.1 初始化全局對象 33
4.3.2 代碼的執行過程 33
4.4 作用域鏈的查找規則 39
4.4.1 對作用域、作用域鏈的理解 39
4.4.2 AO、GO與VO、VE的區別 40
4.4.3 var缺陷 42
後續預告 43
5 作用域鏈面試題與垃圾回收 45
5.1 作用域鏈面試題 45
5.1.1 面試題1 45
5.1.2 面試題2 46
5.1.3 面試題3 48
5.1.4 面試題4 49
5.1.5 面試題5 49
5.1.6 作用域補充 49
5.2 JavaScript中的垃圾回收 50
5.2.1 內存的分配方式 50
5.2.2 常見的垃圾回收算法 51
後續預告 53
6 “一等公民”函數 55
6.1 什麼是一等公民 55
6.1.1 函數是一等公民 55
6.1.2 封裝函數案例 56
6.2 高階函數 57
6.2.1 篩選偶數 57
6.2.2 函數與方法的區別 61
6.2.3 如何學習高階函數 61
6.2.4 語法 62
後續預告 63
7 閉包 64
7.1 什麼是閉包 64
7.1.1 閉包的定義 64
7.1.2 高階函數的執行過程 65
7.1.3 閉包的本質 67
7.1.4 函數執行過程中的內存表現 69
7.1.5 閉包的執行過程 70
7.2 閉包的內存泄漏 73
7.2.1 閉包內存泄漏的解決方案 73
7.2.2 閉包內存泄漏案例 75
7.2.3 激活對象不使用的屬性 78
7.3 JS閉包引用的自由變量銷毀 79
後續預告 80
8 this指向及綁定規則、優先級 81
8.1 什麼是this 81
8.1.1 為什麼需要this 81
8.1.2 this在全局作用域中的指向 84
8.1.3 同一個函數的不同this指向 86
8.2 this的綁定規則 87
8.2.1 規則1：默認綁定 87
8.2.2 規則2：隱式綁定 90
8.2.3 規則3：顯式綁定 92
8.2.4 規則4：new綁定 96
8.3 一些函數的this綁定 97
8.3.1 內置函數的綁定 97
8.3.2 setTimeout定時器 97
8.3.3 監聽點擊 98
8.3.4 數組中的綁定 98
8.4 this規則的優先級 100
8.5 特殊綁定 103
8.5.1 忽略顯式綁定 103
8.5.2 間接函數引用 103
後續預告 105
9 箭頭函數及this面試題 107
9.1 箭頭函數 107
9.1.1 什麼是箭頭函數 107
9.1.2 箭頭函數的使用 108
9.2 this面試題 115
9.2.1 面試題1 115
9.2.2 面試題2 116
9.2.3 面試題3 117
9.2.4 面試題4 118
後續預告 119
10 手寫apply()、call()和bind()方法以及認識arguments對象 120
10.1 手寫apply()、call()和bind()方法 120
10.1.1 call()方法的手寫實現 121
10.1.2 為函數傳遞參數 122
10.1.3 ES6中的剩余參數 125
10.1.4 apply()方法的手寫實現 126
10.1.5 手寫call()和apply()方法的補充 127
10.1.6 bind()方法的手寫實現 127
10.2 認識arguments 129
10.2.1 arguments轉數組 129
10.2.2 數組中slice()方法的手寫實現 130
10.2.3 箭頭函數：無arguments 131
後續預告 132
11 純函數及柯裏化 134
11.1 理解JavaScript純函數 134
11.1.1 副作用 135
11.1.2 純函數的案例 135
11.1.3 純函數的優勢 136
11.2 JavaScript柯裏化 137
11.2.1 柯裏化的結構 137
11.2.2 柯裏化的作用 138
11.3 理解組合函數 143
11.4 通用組合函數的實現 144
後續預告 145
12 with、eval和嚴格模式 146
12.1 JS碎片知識補充 146
12.1.1 with語句 146
12.1.2 eval函數 147
12.2 嚴格模式 147
12.2.1 嚴格模式的定義與應用 147
12.2.2 嚴格模式的限制 149
後續預告 152
13 對象和屬性描述符 153
13.1 面向對象是現實的抽象方式 153
13.1.1 面向對象編程 153
13.1.2 JS中的面向對象 154
13.1.3 對象的數據屬性描述符 155
13.2 Object.defineProperty()方法 155
13.2.1 屬性描述符分類 157
13.2.2 學習屬性描述符的意義 160
後續預告 161
14 對象方法的補充及創建對象方案 162
14.1 在對象上同時定義多個屬性 162
14.2 對象方法補充 165
14.3 創建多個對象方案 166
14.3.1 創建對象方案：工廠模式 167
14.3.2 認識構造函數 169
14.3.3 創建對象方案：構造函數 170
後續預告 172
15 對象的原型 174
15.1 認識對象的原型 174
15.1.1 原型的定義 174
15.1.2 原型的作用 176
15.1.3 函數的原型prototype 177
15.1.4 new操作符 177
15.2 Person構造函數的原型內存圖 178
15.3 函數原型上的屬性 181
15.3.1 為prototype添加屬性 181
15.3.2 constructor屬性 182
15.4 重寫原型對象 184
15.5 創建對象：構造函數和原型組合 187
後續預告 188
16 徹底攻克原型鏈 190
16.1 可枚舉屬性 190
16.2 類與對象 191
16.3 面向對象特性：繼承 191
16.3.1 繼承的重要性 192
16.3.2 JavaScript中的原型鏈 192
16.3.3 Object的原型 195
16.3.4 原型鏈關系的內存圖 201
16.3.5 Object是所有類的父類 202
16.3.6 通過原型鏈繼承 203
16.3.7 借用構造函數繼承 206
16.3.8 原型式繼承函數 209
16.3.9 寄生式繼承函數 213
16.4 寄生組合式繼承 215
16.5 對象的方法補充 218
16.6 原型繼承關系 222
後續預告 224
17 ES6之class類與構造函數 225
17.1 ES6是什麼 225
17.1.1 TC39技術委員會 225
17.1.2 Babel 227
17.2 定義類 228
17.2.1 函數的二義性 228
17.2.2 類的必要性 228
17.2.3 類的特點 229
17.3 在class類中定義構造函數和實例方法 230
17.3.1 類的構造函數 230
17.3.2 類的實例方法 231
17.3.3 類和構造函數的比較 233
17.3.4 類和對象的訪問器方法編寫 234
17.3.5 類中靜態方法的定義 235
17.3.6 實例方法與靜態方法的區別 236
後續預告 238
18 ES6的類與繼承實現 239
18.1 類通過extends實現繼承特性 239
18.2 super關鍵字 240
18.3 ES6轉ES5代碼 243
18.3.1 Babel 243
18.3.2 閱讀源碼的技巧 247
後續預告 247
19 ES6類的混入與解構 248
19.1 擴展繼承內置類 248
19.2 類的混入 249
19.3 React中的高階組件 252
19.4 多態 253
19.4.1 多態的定義 253
19.4.2 傳統面向對象的多態 253
19.4.3 JavaScript中的多態 256
19.5 對象字面量 256
19.5.1 屬性增強 256
19.5.2 方法增強 258
19.5.3 計算屬性名 258
19.6 解構 260
19.6.1 數組解構 260
19.6.2 對象解構 262
後續預告 265
20 var的接替者：let與const 266
20.1 let和const的基本使用 266
20.2 let/const與window的關系 268
20.2.1 詞法環境 270
20.2.2 塊級作用域 270
20.2.3 暫時性死區 273
20.3 實際開發中的選擇 274
後續預告 274
21 ES6的模板字符串與剩余參數 275
21.1 模板字符串的基本使用 275
21.2 函數默認參數 277
21.2.1 剩余參數 281
21.2.2 箭頭函數 282
21.3 展開語法 283
21.3.1 對象的引用賦值、淺拷貝與深拷貝 285
21.3.2 數值的表示 286
後續預告 287
22 ES6的Symbol類型與Set、Map數據結構 288
22.1 Symbol的基本使用 288
22.1.1 Symbol值作為key 289
22.1.2 Symbol方法 291
22.2 數據結構Set 292
22.2.1 Set的基本使用 292
22.2.2 Set的常見方法 294
22.3 WeakSet的基本使用 295
22.3.1 WeakSet的常見方法 295
22.3.2 弱引用與強引用 296
22.3.3 WeakSet的應用場景 298
22.4 數據結構Map 299
22.4.1 Map的基本使用 300
22.4.2 Map的常見方法 301
22.5 WeakMap的基本使用 303
22.5.1 WeakMap的常見方法 304
22.5.2 WeakMap的應用場景 304
後續預告 305
23 ES7至ES15新特性詳解 306
23.1 ES2016（ES7）新特性 306
23.1.1 Array.prototype.includes()方法 306
23.1.2 指數運算符 309
23.2 ES2017（ES8）新特性 309
23.2.1 Object.values()方法 309
23.2.2 Object.entries()方法 311
23.2.3 字符串填充 312
23.2.4 Trailing Commas 313
23.2.5 Object.getOwnPropertyDescriptors()方法 314
23.3 ES2018（ES9）新特性 314
23.4 ES2019（ES10）新特性 314
23.4.1 Array.prototype.flat()方法 314
23.4.2 Array.prototype.flatMap()方法 317
23.4.3 Object.entries()方法 319
23.4.4 String.prototype.trim()方法 320
23.4.5 其他知識點 321
23.5 ES2020（ES11）新特性 321
23.5.1 BigInt 321
23.5.2 空值合並運算符 322
23.5.3 可選鏈運算符 323
23.5.4 globalThis 323
23.5.5 for…in標準化 324
23.5.6 其他知識點 324
23.6 ES2021（ES12）新特性 324
23.6.1 FinalizationRegist 324
23.6.2 WeakRef 326
23.6.3 邏輯賦值運算符 327
23.6.4 其他知識點 328
23.7 ES2022（ES13）新特性 328
23.7.1 top-level await 328
23.7.2 新增類元素 329
23.7.3 靜態代碼塊 330
23.7.4 #x in obj 語法 330
23.7.5 正則表達式匹配索引 331
23.7.6 cause 屬性 331
23.7.7 String.prototype.at()方法 331
23.7.8 Object.hasOwn()方法 332
23.8 ES2023（ES14）新特性 332
23.8.1 Array和TypedArray的新方法 332
23.8.2 shebang 註釋支持 335
23.8.3 在弱集合中將Symbol 作為鍵 335
23.9 ES2024（ES15）新特性 336
23.9.1 Object.groupBy()和Map.groupBy()靜態方法 336
23.9.2 Promise.withResolvers()方法 336
23.9.3 集合運算方法 337
23.9.4 正則表達式標誌 337
後續預告 338
24 Proxy與Reflect 339
24.1 監聽對象的操作 339
24.2 Proxy的基本使用 341
24.2.1 handler.get()和handler.set()方法 342
24.2.2 Proxy(handler)的13個陷阱方法 343
24.3 Reflect的作用 345
24.3.1 Reflect的基本使用 347
24.3.2 Reflect的9個方法 347
24.3.3 Proxy與Reflect中的receiver參數 348
24.3.4 Reflect.construct()方法 354
後續預告 355
25 響應式原理 356
25.1 什麼是響應式 356
25.2 響應式函數和依賴收集 357
25.2.1 依賴收集 358
25.2.2 監聽對象變化 360
25.2.3 所有依賴的保存結構 362
25.2.4 正確收集依賴 366
25.2.5 對Depend類的優化與重構 370
25.3 響應式操作對比 374
25.3.1 Vue.js 3的響應式操作 374
25.3.2 Vue.js 2的響應式操作 376
25.3.3 React的響應式操作 376
後續預告 377
26 Promise 378
26.1 認識Promise 378
26.1.1 異步請求處理 378
26.1.2 Promise的基本使用 381
26.2 Promise的三種狀態 386
26.3 Promise的executor函數參數 387
26.3.1 resolve回調函數 387
26.3.2 reject回調函數 388
26.3.3 thenable對象 389
26.4 Promise的實例方法 390
26.4.1 then()方法 391
26.4.2 catch()方法 394
26.4.3 finally()方法 399
26.5 Promise的靜態方法 400
26.5.1 resolve()和reject()方法 400
26.5.2 all()和allSettled()方法 402
26.5.3 race()和any()方法 403
後續預告 405
27 手寫Promise 406
27.1 Promises/A+規範介紹 406
27.2 then()方法和執行順序 409
27.2.1 then()方法的優化 413
27.2.2 手寫catch()方法 423
27.2.3 手寫finally()方法 425
27.3 Promise的靜態方法 427
27.3.1 手寫resolve()和reject()方法 427
27.3.2 手寫all()和allSettled()方法 427
27.3.3 手寫race()和any()方法 429
27.4 Promises/A+規範測試 434
27.4.1 安裝Promises/A+測試庫 434
27.4.2 編寫測試適配器 434
27.4.3 運行測試 435
後續預告 435
28 疊代器與生成器 436
28.1 什麼是疊代器 436
28.1.1 可疊代對象 440
28.1.2 原生疊代器對象 444
28.1.3 可疊代對象的應用 444
28.1.4 自定義類對象可疊代性 448
28.2 什麼是生成器 451
28.2.1 生成器的概念 452
28.2.2 生成器函數的執行流程 453
28.2.3 yield錯位雙向傳遞 457
28.2.4 生成器的其他方法 460
28.3 優化可疊代對象寫法 462
28.3.1 疊代數字案例 463
28.3.2 自定義類對象優化 464
28.4 異步代碼的處理方式 464
28.4.1 層層嵌套與鏈式調用 465
28.4.2 生成器方案 466
後續預告 468
29 async/await與事件循環隊列 469
29.1 async/await 469
29.1.1 異步函數與普通函數的區別 469
29.1.2 async中的關鍵字await 472
29.1.3 async/await的解決方案 473
29.2 操作系統中的進程與線程 475
29.2.1 操作系統的工作方式 477
29.2.2 瀏覽器中的JavaScript線程 477
29.3 瀏覽器事件循環 478
29.3.1 什麼是事件循環 478
29.3.2 宏任務與微任務 479
29.4 Promise執行面試題 480
29.4.1 面試題1 480
29.4.2 面試題2 482
29.4.3 面試題3 483
29.4.4 Node.js事件循環 488
後續預告 491
30 異常處理方案與JS模塊化 492
30.1 異常處理 492
30.1.1 函數的異常處理方案 493
30.1.2 拋出異常的throw關鍵字 494
30.1.3 異常處理的具體方式 497
30.2 JS模塊化詳解 500
30.2.1 什麼是模塊化 500
30.2.2 JS模塊化的歷史 500
30.2.3 沒有模塊化帶來的問題 502
30.2.4 CommonJS規範與Node.js的關系 503
30.2.5 AMD與CMD規範 513
30.2.6 ESM規範 516
30.2.7 ESM的解析流程 522
30.2.8 CommonJS與ESM相互引用 525
後續預告 526
31 包管理工具詳解 527
31.1 npm包管理工具的作用與下載 527
31.1.1 代碼共享方案 527
31.1.2 包管理工具npm 528
31.1.3 安裝Node.js 528
31.1.4 依賴的版本管理 534
31.1.5 package中的配置補充 535
31.1.6 npm install命令 536
31.1.7 npm install的原理 537
31.1.8 npm的其他命令 541
31.2 包管理工具集合 543
31.2.1 yarn工具 543
31.2.2 cnpm工具 544
31.2.3 npx命令 545
31.2.4 pnpm工具 546
31.3 發布npm包 553
31.3.1 註冊npm賬號 553
31.3.2 終端發布npm包 555
31.3.3 修改包 556
後續預告 556
32 JSON序列化和數據存儲 557
32.1 JSON的由來 557
32.1.1 JSON的基礎語法 558
32.1.2 JSON序列化 559
32.2 初識Storage 566
32.2.1 localStorage和sessionStorage的區別 566
32.2.2 Storage的常見方法與屬性 567
32.2.3 封裝Storage 568
32.3 初識IndexedDB 570
32.3.1 IndexedDB連接數據庫 570
32.3.2 IndexedDB數據庫操作 571
32.4 初識Cookie 575
32.4.1 Cookie的常見屬性 576
32.4.2 客戶端設置Cookie 577
後續預告 578
33 BOM與DOM在現代開發中的應用 579
33.1 認識BOM 579
33.1.1 window全局對象 580
33.1.2 window窗口對象 580
33.1.3 window的常見屬性 582
33.1.4 window的常見方法 583
33.1.5 window的常見事件 584
33.1.6 location對象的常見屬性 585
33.1.7 location對象的常見方法 587
33.1.8 history對象的常見屬性和方法 587
33.2 認識DOM和架構 588
33.2.1 Node節點 590
33.2.2 Document 592
33.2.3 Element 594
33.3 認識事件監聽 596
33.3.1 事件流的由來 597
33.3.2 事件冒泡和事件捕獲 597
33.3.3 事件對象event的常見屬性與方法 599
後續預告 600
34 手寫防抖和節流函數與自定義事件總線 601
34.1 認識防抖函數和節流函數 601
34.1.1 防抖函數 601
34.1.2 節流函數 603
34.2 第三方庫實現防抖節流 604
34.3 手寫防抖函數和節流函數 606
34.3.1 手寫防抖函數 606
34.3.2 手寫節流函數 614
34.4 自定義深拷貝函數 620
34.4.1 深拷貝的基本功能實現 620
34.4.2 其他類型處理 621
34.4.3 循環引用處理 623
34.5 自定義事件總線 625
尾聲 628