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