# 《JavaScript权威指南（原书第6版）》知识点全解

> AI生成｜2026年10月28日｜codebuddy｜原书：David Flanagan《JavaScript权威指南（原书第6版）》，机械工业出版社，2012-04-25
> **我的阅读**：进度 100%｜累计 9小时50分钟｜开始 2017-08-22｜最近 2021-01-11｜读完 2020-03-26

**一句话总结**：把 JavaScript 从词法、类型、对象模型一路讲到浏览器宿主环境（DOM、CSS、事件、HTTP、存储、图形），用一本书建立"语言内核 + 平台 API"的完整坐标系，并附可随时查阅的核心参考。

**适合谁 / 前置知识**：适合已有少量编程经验、需要系统补齐 JS 语义细节与浏览器 API 全貌的开发者；也适合作为长期案头参考书。不适合零基础读者（前 12 章节奏偏密，缺少循序渐进的练习），也不适合只想学某个框架的人。前置：至少要写过变量、循环、函数；了解 HTML/CSS 基本结构；知道浏览器有开发者工具。

## 一、全书地图

| 部分 | 内容 | 章节 | 逻辑定位 |
|---|---|---|---|
| 开篇 | JavaScript 概述 | 第1章 | 用一段完整示例把语言核心与客户端 API 串起来，先给全景再拆解 |
| 第一部分 | JavaScript 语言核心 | 第2章 词法结构；第3章 类型、值和变量；第4章 表达式和运算符；第5章 语句；第6章 对象；第7章 数组；第8章 函数；第9章 类和模块；第10章 正则表达式的模式匹配；第11章 JavaScript 的子集和扩展；第12章 服务器端 JavaScript | 自底向上：字符 → 类型 → 表达式 → 语句 → 复合数据结构（对象/数组）→ 抽象单位（函数/类/模块）→ 文本处理（正则）→ 语言边界（子集、扩展、宿主） |
| 第二部分 | 客户端 JavaScript | 第13章 Web 浏览器中的 JavaScript；第14章 Window 对象；第15章 脚本化文档；第16章 脚本化 CSS；第17章 事件处理；第18章 脚本化 HTTP；第19章 jQuery 类库；第20章 客户端存储；第21章 多媒体和图形编程；第22章 HTML5 API | 自外向内：运行环境（13）→ 全局对象（14）→ 文档（15）→ 样式（16）→ 交互（17）→ 数据通道（18）→ 库的封装（19）→ 本地状态（20）→ 富媒体（21、22） |
| 第三部分 | JavaScript 核心参考 | JavaScript 核心参考（无章节号，按对象/方法条目编排） | 语言内置对象与函数的速查 |
| 第四部分 | 客户端 JavaScript 参考 | 客户端 JavaScript 参考（无章节号，按 API 条目编排） | 浏览器 API 的速查 |

**关系读法**：第一部分是"语言能表达什么"，第二部分是"语言在浏览器里能操作什么"，第三、四部分是前两部分的索引化沉淀。第9章（类与模块）是语言核心的收口，第13章是客户端的入口，两者之间没有依赖跳跃——第 13 章默认你已经会用闭包和原型。

## 二、核心知识点

**1. 类型系统：原始值与对象的分野（第3章）**
是什么：JS 的值分两类——原始值（字符串、数字、布尔、null、undefined，第6版语境下加上 ES6 新增的 Symbol）与对象（含数组、函数、日期、正则）。原始值不可变、按值比较；对象是引用，按引用比较。
为什么重要：几乎所有"看起来诡异"的行为都源于这条分界线——赋值是复制值还是复制引用、`==` 为什么有时相等、函数传参为什么改不动外部的原始值。
怎么用：判断用 `typeof`（对 `null` 返回 `"object"`，这是历史遗留），判空用 `x === null`，判断对象类型用 `Object.prototype.toString.call(x)`。
常见误区：把 `typeof null === "object"` 当成 bug 去"修复"；以为字符串是对象所以能改，实际 `s[0] = "x"` 静默失败（非严格模式）。

**2. 类型转换与相等性（第3章、第4章）**
是什么：JS 有三套相等：`==`（允许隐式转换）、`===`（不做转换）、`Object.is`（区分 `NaN` 与 `-0`）。转换规则由 ToPrimitive → valueOf/toString 的顺序决定。
为什么重要：隐式转换是 bug 高发区，也是老代码兼容性的根源。
怎么用：默认一律 `===`；只在"判 null 或 undefined"时用 `x == null`（一次拦截两者）；数字解析用 `Number()` 而非 `parseInt` 的隐式截断。
常见误区：`[] == false` 为真、`"0" == false` 为真——这些不是异常而是规则；用 `if (x)` 判断数字 0 或空字符串会误判，必须显式比较。

**3. 作用域、提升与声明方式（第3章、第8章）**
是什么：`var` 的函数级作用域与变量提升（声明提升、赋值不提升）；函数声明整体提升；`let/const` 的块级作用域与暂时性死区（TDZ）。
为什么重要：提升解释了"为什么在声明前调用函数可以，访问变量却是 undefined"。
怎么用：新代码统一 `const` 优先、需要重赋值用 `let`、避免 `var`；把声明写在作用域顶部以贴合阅读顺序。
常见误区：以为 `var` 提升会把值也带上去；在循环里用 `var` 捕获闭包，得到的是同一个变量。

**4. 对象与原型链（第6章）**
是什么：每个对象有内部 `[[Prototype]]`，属性查找沿原型链向上，直到 `Object.prototype` 或 `null`。`new` 做的事是：创建对象 → 挂原型 → 执行构造函数 → 返回对象。
为什么重要：JS 没有类继承的语法糖之前，复用全靠原型链；理解它才能读懂 `instanceof`、`Object.create`、`constructor`。
怎么用：`Object.create(proto)` 做纯原型继承；`Object.getPrototypeOf` 查原型；`hasOwnProperty` 区分自有与继承属性。
常见误区：改 `prototype` 上的对象属性会污染所有实例；`for...in` 会枚举继承的可枚举属性，遍历自有属性要用 `Object.keys`。

**5. 属性特性：数据属性与访问器属性（第6章）**
是什么：属性有 `value/writable/enumerable/configurable` 四个特性，或 `get/set` 访问器。`Object.defineProperty` 可精确控制。
为什么重要：`enumerable` 决定是否出现在 `for...in`/`Object.keys`；`writable:false` 可做只读常量；访问器是 Vue 2 响应式的原理基础。
怎么用：`Object.defineProperty(obj, "x", { get(){...}, set(v){...} })`；批量用 `Object.defineProperties`；查看用 `Object.getOwnPropertyDescriptor`。
常见误区：以为 `obj.x = 1` 一定能赋值——只读属性在非严格模式下静默失败，严格模式才抛错。

**6. 数组与类数组对象（第7章）**
是什么：JS 数组是特殊对象，索引是字符串键，`length` 可写。稀疏数组有"空洞"，与 `undefined` 元素不同。类数组（`arguments`、NodeList）有 `length` 和索引但无数组方法。
为什么重要：`length` 可写导致截断/扩容的隐式行为；类数组转数组是高频操作。
怎么用：`Array.prototype.slice.call(arguments)` 或 `Array.from` 转类数组；`Array.isArray` 判断；遍历用 `forEach/map/filter/reduce` 而非 `for...in`。
常见误区：`delete arr[1]` 只留空洞不改 `length`；`sort()` 默认按字符串排序，数字数组必须传比较函数。

**7. 函数的调用模式与 this（第8章）**
是什么：四种调用：方法调用（`this` 为宿主对象）、函数调用（非严格模式为全局对象，严格模式 `undefined`）、构造调用（`this` 为新对象）、`call/apply/bind` 显式指定。
为什么重要：`this` 是 JS 最易错点，也是回调丢失上下文的原因。
怎么用：回调传 `fn.bind(obj)`；`apply` 传数组参数；不确定时用箭头函数（继承外层 `this`）。
常见误区：把方法拆出来单独调用（`const f = obj.m; f()`）会丢 `this`；`bind` 返回新函数，不会修改原函数。

**8. 闭包（第8章）**
是什么：函数与其定义时所在词法环境的组合。外层函数返回后，内层函数仍能访问外层变量。
为什么重要：模块化、私有状态、柯里化、事件回调的基础。
怎么用：用 IIFE 或块级作用域隔离循环变量；用闭包做计数器/缓存；注意不再需要的引用要置空。
常见误区：以为闭包"复制"了变量——它共享同一个绑定；循环里 `var` + 异步回调会全部输出最后一个值。

**9. 类、原型式继承与模块（第9章）**
是什么：第6版同时讲两套：ES5 的构造函数 + 原型链 + 借用构造函数（经典继承），与 ES6 的 `class/extends/super`。模块部分讲 IIFE 命名空间、CommonJS、AMD 与 ES6 模块。
为什么重要：这是从"会写函数"到"能组织代码"的分水岭；也是理解框架源码的前提。
怎么用：ES6 用 `class` 声明、`extends` 继承、`super()` 调父构造；组合优于深继承；模块导出用 `export`，按需加载避免全局污染。
常见误区：`class` 本质仍是原型，方法在 `prototype` 上而非实例上；子类构造函数里 `super()` 之前不能用 `this`。

**10. 正则表达式的模式匹配（第10章）**
是什么：字面量 `/pattern/flags` 或 `RegExp` 构造；元字符、字符类、量词、分组、断言、贪婪/惰性。`String` 的 `match/replace/search/split` 与 `RegExp` 的 `test/exec` 配合。
为什么重要：文本校验、解析、批量替换的通用工具，跨语言可迁移。
怎么用：`g` 全局、`i` 忽略大小写、`m` 多行；`exec` 带 `g` 时可循环取所有匹配并读取捕获组；替换用 `$1` 引用分组或函数回调。
常见误区：带 `g` 的正则对象有 `lastIndex` 状态，复用会跳过匹配；`.` 不匹配换行；量词贪婪导致回溯爆炸。

**11. 事件模型：捕获、冒泡与委托（第17章）**
是什么：事件从 `window` 向下捕获到目标，再向上冒泡。`addEventListener(type, fn, useCapture)` 第三参控制阶段；`stopPropagation` 阻止传播，`preventDefault` 阻止默认行为。
为什么重要：所有交互逻辑的入口；委托是性能与动态列表的关键手段。
怎么用：把监听挂在父容器，用 `event.target` 判断来源（事件委托）；同一元素同一类型同一阶段重复添加会被去重；移除必须传同一函数引用。
常见误区：混淆 `stopPropagation` 与 `preventDefault`；在捕获阶段误判 `this` 与 `target`；`return false` 只在特定属性（如 `onclick`）里等价于两者都做。

**12. 脚本化文档与 DOM 操作（第15章）**
是什么：DOM 是节点树；查询（`getElementById/querySelector(All)`）、遍历（`parentNode/childNodes/nextSibling`）、修改（`createElement/appendChild/insertBefore/replaceChild`）、属性与 `dataset`。
为什么重要：一切前端渲染的底层；理解重排（reflow）与重绘（repaint）才知道性能从哪来。
怎么用：批量修改先 `documentFragment` 或先脱离文档；读写分离避免强制同步布局；用 `textContent` 而非 `innerHTML` 拼接用户输入。
常见误区：`childNodes` 含文本节点，`children` 只含元素；`innerHTML` 拼接用户内容导致 XSS；频繁 `appendChild` 触发多次重排。

**13. 脚本化 HTTP、Ajax 与同源策略（第18章）**
是什么：`XMLHttpRequest` 的生命周期（`open → setRequestHeader → send → onreadystatechange/onload`）；JSON 编解码；同源策略限制跨域读取；CORS 与 JSONP 是绕过手段。
为什么重要：前后端分离架构的基础；跨域是初学者第一个"卡死"的问题。
怎么用：优先 `fetch`（第6版成书时以 XHR 为主，fetch 属后续标准，此处标注：待核对版本适配）；设置 `responseType` 处理二进制；跨域由服务端返回 `Access-Control-Allow-Origin`。
常见误区：以为设置了请求头就能跨域（实际由响应头决定）；`withCredentials` 与 `*` 通配不可共存；GET 带缓存需加时间戳或 `Cache-Control`。

**14. 客户端存储（第20章）**
是什么：`localStorage`（永久，同源共享，约 5MB 量级，仅字符串）、`sessionStorage`（标签页级）、Cookie（随请求发送、4KB 级）、IndexedDB（结构化、大容量、异步）。
为什么重要：离线能力、登录态、性能缓存都依赖它；选错存储会带来安全或容量问题。
怎么用：存对象先 `JSON.stringify`；敏感信息不放 `localStorage`（XSS 可直接读取）；Cookie 设 `HttpOnly/Secure`；大批量数据用 IndexedDB。
常见误区：以为 `localStorage` 跨子域共享（实际按源隔离）；同步 API 在主线程读写大对象会卡顿；隐私模式下可能抛异常，需 try/catch。

**15. 多媒体、图形与 HTML5 API（第21章、第22章）**
是什么：`<audio>/<video>` 的脚本控制；Canvas 2D 绘图上下文（路径、变换、像素操作）；SVG 的声明式图形；地理定位、Web Worker、WebSocket、历史管理、拖放、文件 API 等。
为什么重要：这是"网页"走向"应用"的能力集合。
怎么用：Canvas 用 `getContext("2d")`，动画用 `requestAnimationFrame` 而非 `setInterval`；耗时计算放 Worker；实时通信用 WebSocket。
常见误区：Canvas 是位图，缩放会失真，矢量图用 SVG；Canvas 绘制的内容不被搜索引擎与辅助技术读取，需提供替代文本；Worker 不能访问 DOM。

## 三、关键概念速查表

| 概念 | 一句话解释 | 用在哪儿 |
|---|---|---|
| 原始值 / 引用值 | 前者不可变按值比较，后者按引用共享 | 赋值、传参、相等判断 |
| 原型链 | 属性找不到就沿 `[[Prototype]]` 上溯 | 继承、`instanceof`、方法复用 |
| 闭包 | 函数记住定义时的词法环境 | 私有状态、回调、模块 |
| `this` | 由调用方式决定，不由定义位置决定 | 方法、回调、构造函数 |
| 提升 / TDZ | `var` 声明提前；`let/const` 在声明前不可访问 | 作用域排错 |
| 属性描述符 | `writable/enumerable/configurable` 或 `get/set` | 只读属性、响应式、序列化 |
| 类数组 | 有 `length` 与索引但无数组方法 | `arguments`、NodeList 转换 |
| 事件冒泡 / 捕获 | 事件先下行再上行 | 事件委托、全局拦截 |
| 事件委托 | 监听父元素，用 `target` 分发 | 动态列表、性能优化 |
| 同源策略 | 协议+域名+端口一致才可读 | Ajax、Cookie、存储隔离 |
| CORS | 服务端响应头授权跨域 | 前后端分离 |
| 重排 / 重绘 | 几何变化触发布局计算；外观变化只重绘 | DOM 批量操作优化 |
| `localStorage` | 同源持久化键值对，仅字符串 | 偏好设置、离线缓存 |
| Canvas / SVG | 位图绘制 / 声明式矢量 | 图表、游戏、图标 |
| 模块 | 把作用域与依赖显式化 | 代码组织、按需加载 |
| IIFE | 定义即执行的函数，制造私有作用域 | 避免全局污染、隔离循环变量 |
| JSONP | 用 `<script>` 标签绕过同源限制取数据 | 老旧跨域方案，仅支持 GET |
| 事件循环 | 同步代码先跑完，再从任务队列取回调 | 理解异步顺序与回调时机 |
| 装箱 / 拆箱 | 原始值临时包成对象以调用方法 | 解释 `"abc".length` 为何成立 |

## 四、可复用的方法/框架

**A. 读一段陌生 JS 的四步法**
1. 定作用域：这段代码在函数内还是全局？有哪些提升？
2. 定 `this`：函数是怎么被调用的（方法/裸调/`new`/`bind`）？
3. 定求值时机：哪些是同步求值，哪些进了回调/微任务？
4. 定数据归属：操作的是原始值副本，还是共享的对象引用？

**B. DOM 性能自查清单**
- 是否在循环里读写交替（触发强制同步布局）？
- 是否逐条插入节点（应使用 `DocumentFragment`）？
- 是否用 `innerHTML` 拼接不可信内容（应改 `textContent`）？
- 动画是否用 `requestAnimationFrame`？
- 事件监听是否挂了成百上千个（应改委托）？

**C. 选存储的决策顺序**
数据要不要发给服务端 → 要：Cookie（小、需 `HttpOnly`）；不要 → 数据量小且是字符串 → `localStorage`；仅当前会话 → `sessionStorage`；结构化/大容量/需索引 → IndexedDB。

**D. 判断"该不该用类"**
只有"is-a"关系且需要共享行为时才用继承；否则用组合或工厂函数。层级超过两层，优先重构为组合。

## 五、我的阅读轨迹

| 项目 | 数据 |
|---|---|
| 进度 | 100% |
| 累计阅读 | 9小时50分钟 |
| 开始阅读 | 2017-08-22 |
| 最近阅读 | 2021-01-11 |
| 读完时间 | 2020-03-26 |

**复习建议**：书已读完，但最近一次翻阅距今已近五年，且第6版成书于 ES5 时代，ES6+ 的 `class`、模块、`Promise`、`fetch` 已大幅改变日常写法。建议按"高衰减优先"重读：第6章（对象/原型）、第8章（闭包与 `this`）、第9章（类与模块）、第17章（事件）为第一优先级，这四章是框架源码阅读的地基；第15、18、20章为第二优先级，用于校准 DOM/HTTP/存储的现代替代方案；第21、22章的 API 清单可只做索引式浏览，用到再查。第三、四部分参考手册不必通读，作为查表工具即可。平均每次 40 分钟、按"一章一页笔记"推进，约 6 次可完成核心复读。

## 六、行动清单

1. 用 `Object.create` 与 `class` 各写一遍同样的继承例子，对比原型链走向。
2. 手写一个闭包计数器，再用 `var` 与 `let` 各写一版循环绑定，观察差异。
3. 打开任一网站的开发者工具，用 `getEventListeners` 找出一个委托式监听并解释其分发逻辑。
4. 把项目里所有 `==` 替换为 `===`（保留 `x == null` 的判空写法），跑一遍测试。
5. 写一个 `DocumentFragment` 批量插入 1000 个节点的对比 demo，用 Performance 面板看重排次数。
6. 用 `localStorage` 实现一个带过期时间的缓存封装，处理隐私模式下的异常。
7. 整理一张"本项目用到的浏览器 API → 书中对应章节"的映射表，标出已废弃项。

## 七、延伸阅读

1. **《JavaScript 高级程序设计》（Nicholas C. Zakas）**——先读或并行读。同样是语言+浏览器全景，但示例更贴近工程实践、版本更新更快，可作为本书的"现代化补丁"。
2. **《你不知道的 JavaScript》（Kyle Simpson）**——在本书之后读。专门深挖作用域、闭包、`this`、原型、类型转换这些本书点到为止的语义细节，是对第3、6、8章的放大镜。
3. **《JavaScript 语言精粹》（Douglas Crockford）**——在掌握全貌后读。用极短篇幅给出"好的一部分"与"坏的一部分"的价值判断，帮助建立取舍标准；先读它容易因缺少上下文而看不懂，故排在最后。

三本的顺序建议：先《高级程序设计》建立可运行的工程直觉 → 用本书补齐体系与查表能力 → 用《你不知道的 JavaScript》攻语义深水区 → 用《语言精粹》做减法。