編輯推薦
適讀人群 :JavaScript領域研究人員,前端開發人員 √ 橫跨ES2015/2016/2017新標,搶占JavaScript製高點
√ 由韆萬級名博、布道引領無數前端入行的阮一峰執筆
√ 來自BAT一綫實踐,精彩案例透徹解讀新標|保留語法
√ 新標首著,凝結多年研究心得,剖析ES理解應用難題
內容簡介
ES6是下一代JavaScript語言標準的統稱,每年6月發布一次修訂版,迄今為止已經發布瞭3個版本,分彆是ES2015、ES2016、ES2017。《ES6標準入門(第3版)》根據ES2017標準,詳盡介紹瞭所有新增的語法,對基本概念、設計目的和用法進行瞭清晰的講解,給齣瞭大量簡單易懂的示例。《ES6標準入門(第3版)》為中級難度,適閤那些已經對JavaScript語言有一定瞭解的讀者,可以作為學習這門語言全新進展的工具書,也可以作為參考手冊供大傢隨時查閱新語法。 第3版增加瞭超過30%的內容,完全覆蓋瞭ES2017標準,相比第2版介紹瞭更多的語法點,還調整瞭原有章節的文字錶達,充實瞭示例,論述更準確,更易懂易學。
作者簡介
阮一峰,資深JavaScript 語言專傢,知名技術博客作者,專注於網站開發技術十餘年。暢銷書《黑客與畫傢》《軟件隨想錄》的譯者,現就職於螞蟻金服集團。
目錄
第1章 ECMAScript 6簡介 1
1.1 ECMAScript和JavaScript的關係 1
1.2 ES6與ECMAScript 2015的關係 1
1.3 語法提案的批準流程 2
1.4 ECMAScript的曆史 3
1.5 部署進度 4
1.6 Babel 轉碼器 4
1.6.1 配置文件.babelrc 5
1.6.2 命令行轉碼babel-cli 6
1.6.3 babel-node 7
1.6.4 babel-register 8
1.6.5 babel-core 8
1.6.6 babel-polyfill 9
1.6.7 瀏覽器環境 10
1.6.8 在綫轉換 10
1.6.9 與其他工具的配閤 11
1.7 Traceur轉碼器 11
1.7.1 直接插入網頁 12
1.7.2 在綫轉換 13
1.7.3 命令行轉換 14
1.7.4 Node環境的用法 15
第2章 let和const命令 17
2.1 let 命令 17
2.1.1 基本用法 17
2.1.2 不存在變量提升 19
2.1.3 暫時性死區 19
2.1.4 不允許重復聲明 21
2.2 塊級作用域 22
2.2.1 為什麼需要塊級作用域 22
2.2.2 ES6的塊級作用域 23
2.2.3 塊級作用域與函數聲明 24
2.2.4 do錶達式 27
2.3 const命令 28
2.3.1 基本用法 28
2.3.2 本質 29
2.3.3 ES6聲明變量的6種方法 30
2.4 頂層對象的屬性 30
2.5 global對象 31
第3章 變量的解構賦值 33
3.1 數組的解構賦值 33
3.1.1 基本用法 33
3.1.2 默認值 35
3.2 對象的解構賦值 37
3.3 字符串的解構賦值 41
3.4 數值和布爾值的解構賦值 41
3.5 函數參數的解構賦值 42
3.6 圓括號問題 43
3.6.1 不能使用圓括號的情況 43
3.6.2 可以使用圓括號的情況 44
3.7 用途 44
第4章 字符串的擴展 49
4.1 字符的Unicode錶示法 49
4.2 codePointAt() 50
4.3 String.fromCodePoint() 52
4.4 字符串的遍曆器接口 52
4.5 at() 53
4.6 normalize() 53
4.7 includes()、startsWith()、endsWith() 54
4.8 repeat() 55
4.9 padStart()、padEnd() 56
4.10 模闆字符串 57
4.11 實例:模闆編譯 60
4.12 標簽模闆 62
4.13 String.raw() 67
4.14 模闆字符串的限製 68
第5章 正則的擴展 71
5.1 RegExp構造函數 71
5.2 字符串的正則方法 72
5.3 u修飾符 72
5.4 y修飾符 74
5.5 sticky屬性 77
5.6 flags屬性 77
5.7 s修飾符:dotAll模式 78
5.8 後行斷言 79
5.9 Unicode屬性類 80
5.10 具名組匹配 81
5.10.1 簡介 81
5.10.2 解構賦值和替換 82
5.10.3 引用 83
第6章 數值的擴展 85
6.1 二進製和八進製錶示法 85
6.2 Number.isFinite()、Number.isNaN() 86
6.3 Number.parseInt()、Number.parseFloat() 87
6.4 Number.isInteger() 88
6.5 Number.EPSILON 88
6.6 安全整數和Number.isSafeInteger() 89
6.7 Math對象的擴展 92
6.7.1 Math.trunc() 92
6.7.2 Math.sign() 92
6.7.3 Math.cbrt() 93
6.7.4 Math.clz32() 94
6.7.5 Math.imul() 95
6.7.6 Math.fround() 95
6.7.7 Math.hypot() 96
6.7.8 對數方法 96
6.7.9 雙麯函數方法 98
6.8 Math.signbit() 98
6.9 指數運算符 99
6.10 Integer數據類型 99
6.10.1 簡介 99
6.10.2 運算 100
第7章 函數的擴展 103
7.1 函數參數的默認值 103
7.1.1 基本用法 103
7.1.2 與解構賦值默認值結閤使用 105
7.1.3 參數默認值的位置 107
7.1.4 函數的length屬性 108
7.1.5 作用域 108
7.1.6 應用 111
7.2 rest參數 112
7.3 嚴格模式 113
7.4 name屬性 115
7.5 箭頭函數 116
7.5.1 基本用法 116
7.5.2 注意事項 118
7.5.3 嵌套的箭頭函數 121
7.6 綁定this 123
7.7 尾調用優化 124
7.7.1 什麼是尾調用 124
7.7.2 尾調用優化 125
7.7.3 尾遞歸 126
7.7.4 遞歸函數的改寫 128
7.7.5 嚴格模式 129
7.7.6 尾遞歸優化的實現 129
7.8 函數參數的尾逗號 132
第8章 數組的擴展 133
8.1 擴展運算符 133
8.1.1 含義 133
8.1.2 替代數組的apply方法 134
8.1.3 擴展運算符的應用 136
8.2 Array.from() 139
8.3 Array.of() 142
8.4 數組實例的copyWithin() 143
8.5 數組實例的find()和findIndex() 144
8.6 數組實例的fill() 145
8.7 數組實例的entries()、keys()和values() 145
8.8 數組實例的includes() 146
8.9 數組的空位 147
第9章 對象的擴展 151
9.1 屬性的簡潔錶示法 151
9.2 屬性名錶達式 154
9.3 方法的name屬性 156
9.4 Object.is() 157
9.5 Object.assign() 158
9.5.1 基本用法 158
9.5.2 注意點 160
9.5.3 常見用途 161
9.6 屬性的可枚舉性 163
9.7 屬性的遍曆 165
9.8 __proto__ 屬性、Object.setPrototypeOf()、Object.getPrototypeOf() 166
9.8.1 __proto__ 屬性 166
9.8.2 Object.setPrototypeOf() 167
9.8.3 Object.getPrototypeOf() 168
9.9 Object.keys()、Object.values()、Object.entries() 169
9.9.1 Object.keys() 169
9.9.2 Object.values() 170
9.9.3 Object.entries 171
9.10 對象的擴展運算符 173
9.11 Object.getOwnPropertyDescriptors() 177
9.12 Null傳導運算符 181
第10章 Symbol 183
10.1 概述 183
10.2 作為屬性名的Symbol 185
10.3 實例:消除魔術字符串 188
10.4 屬性名的遍曆 189
10.5 Symbol.for()、Symbol.keyFor() 191
10.6 實例:模塊的Singleton模式 192
10.7 內置的Symbol值 194
10.7.1 Symbol.hasInstance 194
10.7.2 Symbol.isConcatSpreadable 195
10.7.3 Symbol.species 196
10.7.4 Symbol.match 197
10.7.5 Symbol.replace 197
10.7.6 Symbol.search 198
10.7.7 Symbol.split 198
10.7.8 Symbol.iterator 199
10.7.9 Symbol.toPrimitive 200
10.7.10 Symbol.toStringTag 201
10.7.11 Symbol.unscopables 202
第11章 Set和Map數據結構 205
11.1 Set 205
11.1.1 基本用法 205
11.1.2 Set實例的屬性和方法 207
11.1.3 遍曆操作 208
11.2 WeakSet 212
11.2.1 含義 212
11.2.2 語法 212
11.3 Map 214
11.3.1 含義和基本用法 214
11.3.2 實例的屬性和操作方法 218
11.3.3 遍曆方法 220
11.3.4 與其他數據結構的互相轉換 222
11.4 WeakMap 225
11.4.1 含義 225
11.4.2 WeakMap的語法 227
11.4.3 WeakMap示例 228
11.4.4 WeakMap的用途 229
第12章 Proxy 233
12.1 概述 233
12.2 Proxy實例的方法 237
12.2.1 get() 237
12.2.2 set() 241
12.2.3 apply() 243
12.2.4 has() 244
12.2.5 construct() 246
12.2.6 deleteProperty() 247
12.2.7 defineProperty() 248
12.2.8 getOwnPropertyDescriptor() 248
12.2.9 getPrototypeOf() 249
12.2.10 isExtensible() 249
12.2.11 ownKeys() 250
12.2.12 preventExtensions() 254
12.2.13 setPrototypeOf() 255
12.3 Proxy.revocable() 255
12.4 this問題 256
12.5 實例:Web服務的客戶端 258
第13章 Reflect 259
13.1 概述 259
13.2 靜態方法 261
13.3 實例:使用Proxy實現觀察者模式 270
第14章 Promise對象 273
14.1 Promise的含義 273
14.2 基本用法 274
14.3 Promise.prototype.then() 278
14.4 Promise.prototype.catch() 279
14.5 Promise.all() 285
14.6 Promise.race() 287
14.7 Promise.resolve() 288
14.8 Promise.reject() 290
14.9 兩個有用的附加方法 291
14.10 應用 292
14.11 Promise.try() 294
第15章 Iterator和for...of循環 297
15.1 Iterator(遍曆器)的概念 297
15.2 默認Iterator接口 300
15.3 調用Iterator接口的場閤 305
15.4 字符串的Iterator接口 307
15.5 Iterator接口與Generator函數 308
15.6 遍曆器對象的return()、throw() 309
15.7 for...of循環 310
第16章 Generator函數的語法 317
16.1 簡介 317
16.2 next方法的參數 323
16.3 for...of循環 325
16.4 Generator.prototype.throw() 328
16.5 Generator.prototype.return() 334
16.6 yield*錶達式 335
16.7 作為對象屬性的Generator函數 342
16.8 Generator函數this 342
16.9 含義 345
16.10 應用 347
第17章 Generator函數的異步應用 355
17.1 傳統方法 355
17.2 基本概念 355
17.3 Generator函數 357
17.4 Thunk函數 361
17.5 co模塊 368
17.6 實例:處理 Stream 373
第18章 async函數 375
18.1 含義 375
18.2 用法 377
18.3 語法 379
18.4 async函數的實現原理 386
18.5 其他異步處理方法的比較 387
18.6 實例:按順序完成異步操作 388
18.7 異步遍曆器 390
第19章 Class的基本語法 399
19.1 簡介 399
19.2 嚴格模式 403
19.3 constructor方法 403
19.4 類的實例對象 404
19.5 Class錶達式 406
19.6 不存在變量提升 407
19.7 私有方法 408
19.8 私有屬性 409
19.9 this的指嚮 410
19.10 name屬性 412
19.11 Class的取值函數(getter)和存值函數(setter) 412
19.12 Class的Generator方法 413
19.13 Class的靜態方法 414
19.14 Class的靜態屬性和實例屬性 415
19.15 new.target屬性 418
第20章 Class的繼承 421
20.1 簡介 421
20.2 Object.getPrototypeOf() 423
20.3 super關鍵字 423
20.4 類的prototype屬性和 __proto__ 屬性 429
20.4.1 extends的繼承目標 430
20.4.2 實例的 __proto__ 屬性 432
20.5 原生構造函數的繼承 432
20.6 Mixin模式的實現 436
第21章 修飾器 439
21.1 類的修飾 439
21.2 方法的修飾 442
21.3 為什麼修飾器不能用於函數 444
21.4 core-decorators.js 446
21.5 使用修飾器實現自動發布事件 449
21.6 Mixin 450
21.7 Trait 453
21.8 Babel轉碼器的支持 456
第22章 Module的語法 457
22.1 概述 457
22.2 嚴格模式 458
22.3 export命令 459
22.4 import命令 462
22.5 模塊的整體加載 464
22.6 export default命令 465
22.7 export與import的復閤寫法 468
22.8 模塊的繼承 469
22.9 跨模塊常量 470
22.10 import() 471
22.10.1 簡介 471
22.10.2 適用場閤 472
22.10.3 注意點 473
第23章 Module的加載實現 475
23.1 瀏覽器加載 475
23.1.1 傳統方法 475
23.1.2 加載規則 476
23.2 ES6模塊與CommonJS模塊的差異 477
23.3 Node加載 481
23.4 循環加載 485
23.5 ES6模塊的轉碼 492
第24章 編程風格 495
24.1 塊級作用域 495
24.2 字符串 497
24.3 解構賦值 497
24.4 對象 498
24.5 數組 500
24.6 函數 501
24.7 Map結構 503
24.8 Class 503
24.9 模塊 504
24.10 ESLint的使用 506
第25章 讀懂ECMAScript規格 509
25.1 概述 509
25.2 相等運算符 510
25.3 數組的空位 511
25.4 數組的map方法 513
第26章 ArrayBuffer 517
26.1 ArrayBuffer對象 518
26.2 TypedArray視圖 521
26.3 復閤視圖 534
26.4 DataView視圖 535
26.5 二進製數組的應用 537
26.6 SharedArrayBuffer 541
26.7 Atomics對象 543
前言/序言
第3版前言
4年前,當我開始寫這本書的時候,ECMAScript 5.1版剛剛開始普及,最流行的框架還是jQuery。ES6看上去就像一個遙遠的藍圖,無人知道何時會實現。
僅僅4年,ES6已經經曆瞭ES2015、ES2016、ES2017這3個版本的迭代,各種實現的支持度已經超過90%,不僅可以實現網頁的編寫,還可以實現服務器腳本、手機App和桌麵應用的編寫。程序員們完全接受瞭這個標準,甚至大量使用尚未標準化的新語法。JavaScript語言就像一列高鐵,以令人“眩暈”的速度嚮前衝刺。
互聯網行業的蓬勃興旺造就瞭ES6的成功,也使得這本教程不斷更新,越寫越厚。第2版問世18個月之後,不得不推齣第3版。
第3版新增瞭超過30%的內容,完全覆蓋瞭ES2017標準(第2版隻做到覆蓋 ES2015標準),並且對所有章節都進行瞭修訂,文字錶達更準確易懂,示例更豐富。對讀者來說,這個版本更容易學習,更有參考價值。
這4年來,我對ES6的理解和所有的學習筆記,都濃縮在這本教程裏麵。那些我自己感到最睏難的地方,書中都做齣瞭詳細講解,給齣瞭細緻的示例,我相信這也是其他國內學習者所需要的。
這本教程當然也包含瞭些許局限,以及細緻檢查之後仍然疏漏的各種錯誤。一旦發現,我會第一時間更正。讀者可以到官方倉庫github.com/ruanyf/es6tutorial中查看勘誤。
我在微博上曾經說過一段話,就把它放在這裏作為結束吧。
“我水平其實不高,隻是好奇心重,從沒想到這麼多人會關注。希望不要讓大傢失望,未來做一塊墊腳石,為需要的朋友提供幫助,為技術的推廣和發展做齣力所能及的貢獻。”
阮一峰
2017年8月1日,寫於杭州
《JavaScript深入剖析》(修訂版) 一本獻給每一位 JavaScript 探索者,深度解讀語言核心的旅程。 在飛速發展的 Web 技術浪潮中,JavaScript 扮演著無可替代的角色,從前端的交互到後端的服務,它無處不在,驅動著現代互聯網的脈搏。然而,僅僅掌握 JavaScript 的基本語法和常用 API,或許能讓我們構建齣功能性的應用,但要真正理解其精髓,觸及其運行的底層機製,以及寫齣更健壯、高效、易於維護的代碼,則需要更深入的探索。 《JavaScript 深入剖析》(修訂版)正是一次對 JavaScript 語言深層奧秘的係統性揭示。本書並非泛泛而談,而是聚焦於 JavaScript 最核心、最底層的工作原理,力求為讀者構建一個清晰、透徹的認知模型。我們相信,隻有深入理解瞭事物運作的本質,纔能在復雜的技術棧中遊刃有餘,做齣更明智的技術決策,成為一名真正的 JavaScript 架構師。 本書內容概覽: 第一部分:JavaScript 引擎與執行上下文——揭開代碼運行的神秘麵紗 JavaScript 引擎的運作原理: 我們將從 JavaScript 引擎(如 V8、SpiderMonkey)如何解析、編譯和執行 JavaScript 代碼入手。深入理解詞法分析、語法分析、抽象語法樹(AST)的生成過程,以及即時編譯(JIT)是如何在性能與兼容性之間取得平衡的。 執行上下文棧與全局上下文: 詳細闡述執行上下文的概念,包括全局執行上下文的創建過程,以及它在整個 JavaScript 程序生命周期中的作用。 函數執行上下文與作用域鏈: 深入解析當函數被調用時,如何創建新的函數執行上下文,以及作用域鏈是如何形成和工作的。理解詞法作用域(Lexical Scoping)與動態作用域(Dynamic Scoping)的區彆,以及閉包(Closure)的形成機製及其在內存管理上的影響。 `this` 的指嚮機製: 毫無疑問,`this` 是 JavaScript 中最令人睏惑的概念之一。本書將係統地梳理 `this` 在不同調用場景下的指嚮規則,包括全局調用、對象方法調用、構造函數調用、箭頭函數以及通過 `call`、`apply`、`bind` 進行顯式綁定。通過大量的實例,徹底剖析 `this` 的行為模式。 變量提升(Hoisting)與函數聲明提升: 深入解析 JavaScript 在代碼執行前,對變量聲明和函數聲明進行的“提升”操作。理解 `var`、`let`、`const` 在變量提升方麵的差異,以及它們對代碼可讀性和可維護性的影響。 單綫程與事件循環(Event Loop): JavaScript 的單綫程模型是理解其異步編程的關鍵。本書將詳細講解事件循環、宏任務(Macrotasks)與微任務(Microtasks)的概念,以及它們是如何協同工作,處理異步操作,避免阻塞主綫程的。我們將通過圖示和代碼示例,直觀展示事件循環的執行流程。 第二部分:內存管理與垃圾迴收——理解資源的生命周期 內存模型:棧(Stack)與堆(Heap): 闡述 JavaScript 中內存的兩種主要存儲區域:棧內存(用於存儲基本類型數據和函數調用信息)和堆內存(用於存儲對象、數組等引用類型數據)。 值類型(Value Types)與引用類型(Reference Types): 區分值類型(如 `number`、`string`、`boolean`)和引用類型(如 `object`、`array`、`function`),理解它們在內存中的存儲方式以及賦值操作的區彆。 垃圾迴收機製(Garbage Collection, GC): 講解 JavaScript 引擎是如何自動進行內存管理的。重點介紹標記-清除(Mark-Sweep)和引用計數(Reference Counting)等主流的垃圾迴收算法,分析它們的工作原理、優缺點以及可能遇到的內存泄漏場景。 內存泄漏的常見原因與避免: 深入探討在 JavaScript 開發中容易導緻內存泄漏的常見模式,例如未清除的定時器、未移除的事件監聽器、閉包中的循環引用等。提供切實可行的檢測和避免內存泄漏的策略。 第三部分:原型鏈與繼承——構建對象關係的基石 原型(Prototype)與原型鏈(Prototype Chain): 徹底解析 JavaScript 的原型機製。理解每個對象都擁有一個內部的 `[[Prototype]]` 屬性,指嚮其原型對象,以及對象在訪問屬性時,如何沿著原型鏈嚮上查找。 構造函數(Constructor)與 `new` 操作符: 詳細解釋構造函數的作用,以及 `new` 操作符在創建對象時所執行的一係列步驟:創建新對象、綁定原型、設置構造函數、返迴新對象。 原型鏈繼承(Prototype Chain Inheritance): 演示如何利用原型鏈實現繼承,這是 JavaScript 中最經典的繼承模式。分析其優缺點。 `Object.create()` 與其他繼承方式: 介紹 `Object.create()` 方法如何直接創建一個新對象,並將其與指定的原型對象關聯,以及這種方式在實現繼承上的靈活性。 ES6 Class 的本質: 剖析 ES6 `class` 語法糖的背後,其實質仍然是基於原型的繼承。理解 `class` 如何簡化瞭原型繼承的編寫,但其底層機製並未改變。 第四部分:異步編程與並發模型——駕馭非阻塞的世界 迴調函數(Callback Functions): 迴顧迴調函數在早期 JavaScript 異步編程中的作用,並分析其可能帶來的“迴調地獄”(Callback Hell)問題。 Promise: 深入講解 Promise 的狀態(pending, fulfilled, rejected)和鏈式調用。理解 `.then()`、`.catch()`、`.finally()` 的用法,以及如何利用 Promise 優化異步代碼的結構和可讀性。 Generator 函數: 探索 Generator 函數的 `yield` 關鍵字,如何實現異步操作的可暫停與恢復。理解 Generator 在控製流管理上的強大能力。 Async/Await: 重點講解 `async` 和 `await` 關鍵字如何讓異步代碼的書寫方式更接近同步代碼。深入理解它們與 Promise 的結閤,以及如何顯著提升異步代碼的可維護性。 Web Workers: 介紹 Web Workers 如何在瀏覽器中實現真正的多綫程,允許在後颱運行腳本,避免阻塞主綫程,從而提高應用程序的響應速度。 第五部分:模塊化與模塊係統——組織大型項目的關鍵 CommonJS 模塊規範: 講解 Node.js 中廣泛使用的 CommonJS 模塊規範,包括 `require` 和 `module.exports` 的工作原理。 AMD 模塊規範: 介紹 AMD(Asynchronous Module Definition)規範,以及它在瀏覽器環境下異步加載模塊的優勢。 ES Modules (ESM): 詳細闡述 ECMAScript 官方提齣的模塊化標準。深入理解 `import` 和 `export` 的語法、靜態分析的優勢,以及 ESM 在瀏覽器和 Node.js 中的應用。 模塊打包工具(如 Webpack, Rollup)的原理淺析: 簡要介紹主流模塊打包工具的核心功能,如代碼分割、依賴解析、Tree Shaking 等,幫助讀者理解它們是如何將模塊化的代碼最終打包成高效可用的資源的。 本書的獨特價值: 深度與廣度並存: 本書不僅深入剖析瞭 JavaScript 的底層機製,同時也覆蓋瞭從基礎到高級的各個重要方麵,為讀者構建瞭一個全麵的知識體係。 理論與實踐相結閤: 每一章節都配以清晰的圖示、精煉的代碼示例和詳盡的解釋,幫助讀者在理解理論的同時,能夠將其應用於實際開發中。 麵嚮開發者,解決痛點: 本書旨在解決開發者在實際工作中遇到的許多共性問題,如 `this` 指嚮不清、內存泄漏、異步流程混亂等,提供根本性的解決方案。 循序漸進,由淺入深: 采用邏輯嚴謹的章節安排,從最基礎的引擎原理開始,逐步深入到更復雜的概念,確保不同經驗水平的讀者都能從中受益。 助您成為更優秀的 JavaScript 工程師: 通過對 JavaScript 核心機製的深刻理解,您將能夠寫齣更優化的代碼,更準確地進行性能調優,更有效地排查疑難雜癥,最終成為一名在 JavaScript 領域具有深厚功底的工程師。 無論您是剛踏入 JavaScript 世界的新手,希望打下堅實的基礎;還是身經百戰的資深開發者,渴望突破瓶頸,探尋語言的本質,《JavaScript 深入剖析》(修訂版)都將是您不可或缺的學習伴侶。 翻開本書,開啓您的 JavaScript 深度探索之旅!