JavaScript 学习路线 MOC

从零基础到可独立交付浏览器与 Node 侧 JavaScript 应用的系统学习路线：七个阶段、依赖关系、逐篇目录与 0 到 1 完成标准。

#type / moc #status / growing #tech / dev #resource / javascript

[!info] related notes

JavaScript 学习路线 MOC

这个概念为什么出现

没有依赖顺序的笔记库会制造假进度：会写 async/await 却不懂事件循环，会用 class 却不知原型链，会调框架却不会管模块边界与错误。本路线把「从零到可交付前端逻辑与 Node 脚本/服务」拆成七个阶段，作为学习与复习的主路径。

[!abstract] 路线结论 先建立“值、作用域与执行上下文”的心智，再学对象/原型/this，随后进入错误、模块与异步；异步必须连同事件循环与取消边界一起学，最后用工程化与宿主环境能力完成真实程序，需要时再下沉到引擎与运行时。

学 JavaScript 最怕把“语法会写”和“语言模型真正建立起来”混为一谈。整条路线围绕五个问题展开：

  1. 原始值与引用、作用域与闭包分别解决什么问题
  2. 为什么对象系统以原型为核心，而 class 是语法层
  3. 为什么 this 取决于调用方式，而不是定义位置
  4. 为什么单线程靠事件循环承载异步，微任务与宏任务如何排队
  5. 为什么模块系统与宿主环境（浏览器 / Node）是“会写语言”的一半

如何使用这份路线

场景做法
从零开始按阶段编号顺序读；每篇先跑最小示例，再看规则与边界
已有 Java/Python/Go 经验可加速语法，但不要跳过闭包、原型、this 与事件循环
只抓主干看文末「8 个主干主题」和「0 到 1 完成标准」
主攻浏览器阶段一到四后优先 浏览器 JS MOC
主攻 Node阶段一到四后优先 Node.js 侧 JS MOC
查某一主题先定位阶段表中的文件名，再打开对应笔记
已熟悉常用 JS/TS API快速通过阶段一语法，重点补闭包、原型、异步边界、模块和宿主 API

难度标记

  • L1 入门 · L2 基础巩固 · L3 核心心智 · L4 工程/异步 · L5 运行时与进阶
  • 源码：否 / 建议 / 需要 —— 是否值得对照 ECMAScript 规范、MDN 或引擎文档加深

依赖关系总图

flowchart TD
    S1["阶段一 基本认知"] --> S2["阶段二 对象与类型模型"]
    S2 --> S3["阶段三 错误、模块与抽象"]
    S3 --> S4["阶段四 异步与事件循环"]
    S3 --> S5["阶段五 工程化开发"]
    S4 --> S5
    S5 --> S6["阶段六 运行时与进阶"]
    S5 --> S7["阶段七 真实项目能力"]
    S4 --> S7
    S6 --> S7

箭头表示认知依赖，不表示前一阶段必须全部背完。每个阶段都应运行最小例子并观察结果。

阶段与子 MOC 对照

阶段目标主要子 MOC
一建立值、变量、控制流与函数的默认心智JavaScript 语言基础 MOC · ECMAScript MOC
二理解对象、原型、this、类与相等性JavaScript 类型与对象模型 MOC
三错误处理、模块边界与可复用抽象JavaScript 模块与工程化 MOC
四Promise、async/await、事件循环与取消JavaScript 异步与并发 MOC
五包管理、测试、构建与 TypeScript 协作JavaScript 模块与工程化 MOC · TypeScript MOC
六引擎、内存、性能方法论JavaScript 运行时与进阶 MOC
七浏览器 DOM / 网络与 Node 侧交付浏览器 JS MOC · Node.js 侧 JS MOC

阶段一：建立 JavaScript 的基本认知

目标：能解释 JS 解决什么问题；能在浏览器控制台与 Node 中运行程序；理解变量、类型、表达式、控制流与函数。

完成标准：

  • 能用 node 与浏览器控制台验证最小脚本
  • 能说明 let/const/var 与暂时性死区的差异
  • 能读懂函数参数、返回值与基础闭包
序号笔记核心问题难度源码
1.1JavaScriptJS 是什么、边界在哪L1否
1.2ECMAScript语言标准与宿主如何分工L2建议
1.3ECMAScript 语法基础语句、表达式与基础语法L1否
1.4var / let / const声明方式如何影响作用域与提升L2否
1.5变量提升提升到底提升了什么L2建议
1.6运算符与表达式运算符、短路与优先级L1否
1.7逻辑语句与控制流if/for/switch 如何组织控制流L1否
1.8函数函数声明、表达式与一等公民L2否
1.9类型转换隐式/显式转换规则L2建议
1.10null 与 undefined两种“空”如何区分L2否
1.11原始值与引用值赋值复制的是值还是引用L3建议
1.12作用域与执行上下文作用域链如何查找名字L3建议
1.13执行上下文调用时创建了哪些环境L3建议
1.14闭包闭包捕获的是变量还是值L3建议

阶段二：理解对象与类型模型

目标：建立对象属性访问、原型链、this、构造与 class 的统一模型。

完成标准：

  • 能手绘一条属性查找原型链
  • 能判断四种常见调用下 this 指向
  • 能解释 class 与原型机制的关系
序号笔记核心问题难度源码
2.1对象对象如何存属性与方法L2否
2.2对象总览对象系统全景L2否
2.3基础引用类型常用内置对象能力L2否
2.4集合引用类型Map/Set/Weak* 边界L2否
2.5数组数组方法与可变性L2否
2.6字符串与 Unicode字符串索引与码点L3建议
2.7原型原型对象解决什么问题L3建议
2.8原型链属性查找如何沿链上升L3建议
2.9原型不是 class为何 JS 不是经典类继承L3否
2.10构造函数new 前后发生了什么L3建议
2.11new 运算符new 的步骤与返回值规则L3建议
2.12classclass 语法糖落点在哪L2否
2.13ES6/ES5 继承对照继承写法如何映射到原型L3建议
2.14this 关键字this 绑定规则L3建议
2.15ECMAScript 面向对象面向对象关系总览L3否
2.16类型检测typeof/instanceof 边界L2否

阶段三：错误、模块与可复用抽象

目标：能显式处理错误，能用模块组织代码，理解迭代器/生成器与代理等抽象边界。

完成标准：

  • 能设计可传播的错误信息与恢复策略
  • 能说清 ESM 与 CJS 的互操作边界
  • 知道何时用 Proxy/迭代器而不是硬编码循环
序号笔记核心问题难度源码
3.1try-catch 错误处理异常如何捕获与传播L2否
3.2模块模式模块如何隔离作用域L3建议
3.3ES Module import/exportESM 语法与绑定语义L3建议
3.4CommonJSNode 传统模块如何工作L2否
3.5CommonJS / AMD / UMD历史模块格式如何演进L2否
3.6迭代器与生成器可迭代协议解决什么L3建议
3.7Proxy 与 Reflect元编程边界在哪L4建议
3.8正则表达式文本匹配的能力与成本L2否
3.9JSON in JS序列化边界与安全注意点L2否

阶段四：异步与事件循环

目标：建立“单线程 + 事件循环 + 任务队列”模型，并掌握 Promise / async 与取消思维。

完成标准：

  • 能预测微任务与宏任务的交错顺序
  • 能把回调地狱改写为 Promise/async 链
  • 能解释为何 sleep 不能当同步锁
序号笔记核心问题难度源码
4.1异步总览异步模型全景L2否
4.2同步与异步同步阻塞与异步交接L2否
4.3PromisePromise 状态机如何工作L3建议
4.4Promise 与 asyncasync/await 如何落到 PromiseL3建议
4.5Promise 链then 链如何传值与吞错L3否
4.6事件循环浏览器事件循环主线L3建议
4.7JS 事件循环（深入）宏/微任务排队细节L4建议
4.8定时器与事件监听定时器与监听如何进入队列L2否
4.9进程线程与协程对照JS 并发叙事如何对照其他语言L3否
4.10Node 事件循环阶段Node 相位模型（宿主特化）L4建议
4.11AbortController 与异步取消异步任务的取消意图如何传播L3否

阶段五：工程化开发

目标：会用包管理、类型协作、测试与构建把脚本变成可维护项目。

完成标准：

  • 能初始化 npm/pnpm 项目并管理依赖
  • 理解 TS 与 JS 的协作边界
  • 能写出基础单元测试与脚本任务
序号笔记核心问题难度源码
5.1package.json清单文件如何定义项目L2否
5.2包管理器npm/pnpm/yarn 差异L2否
5.3工程化与运行时全景工具链如何拼起来L3否
5.4TypeScript类型层如何叠在 JS 上L3否
5.5JS 到 TS 迁移差异迁移时最常踩什么L3否
5.6TypeScript MOCTS 专题导航L2否
5.7Vite现代前端开发服务器与构建L3否
5.8Vite 学习路线构建工具系统学习L3否
5.9构建与 Electron 打包桌面打包边界L4否
5.10前端测试如何用自动化验证行为和边界L3否

阶段六：运行时与进阶

目标：理解引擎/内存/性能的边界，区分规范保证与实现细节。

完成标准：

  • 能说明堆/栈与 GC 的粗粒度模型
  • 知道何时用性能分析而不是凭感觉优化
  • 不把 V8 细节写成语言永久承诺
序号笔记核心问题难度源码
6.1内存管理可达性与 GC 粗模型L4建议
6.2工程化与运行时运行时能力地图L3否
6.3运行时与进阶 MOC进阶导航L4否

阶段七：真实项目能力

目标：在浏览器与 Node 宿主中交付交互、网络与服务能力。

完成标准：

  • 能用 DOM/事件/Fetch 完成可交互页面逻辑
  • 能在 Node 中完成脚本或 HTTP 服务入门
  • 知道框架（React/Vue）挂在哪一层，而不替代语言主线
序号笔记核心问题难度源码
7.1浏览器中的 JavaScript浏览器宿主总览L2否
7.2DOM如何查询与更新文档树L2否
7.3事件事件模型与委托L2否
7.4BOM窗口与导航相关 APIL2否
7.5Fetch API网络请求最小闭环L2否
7.6前端 HTTP 请求XHR/Fetch/Axios 选型L3否
7.7Node.js 中的 JavaScriptNode 宿主总览L2否
7.8Node.js MOCNode 专题导航L2否
7.9React 学习路线UI 框架分支（可选）L3否
7.10Vue 学习路线UI 框架分支（可选）L3否
7.11Web Streams 与增量文本解码字节块如何安全还原为文本记录L3建议
7.12NDJSON、SSE 与流式协议边界流读取、协议解析和业务事件如何分层L4建议

如果只抓主干，优先这 8 个主题

  1. var / let / const · 作用域与执行上下文
  2. 原始值与引用值
  3. 闭包
  4. 原型链
  5. this 关键字
  6. Promise · async/await
  7. 事件循环
  8. ES Module

一条实用学习原则

不要把 JavaScript 学成“背 API 和框架钩子”。先把 作用域/闭包、原型/this、异步/事件循环、模块 四条主线学稳，再进入工程化、浏览器 API 与框架。

0 到 1 的完成标准

  • 能解释闭包为什么能“记住”外层变量
  • 能手画属性查找的原型链路径
  • 能判断常见调用下 this 的指向
  • 能预测一段含 Promise 与 setTimeout 的输出顺序
  • 能用 ESM 组织多文件并处理基础错误
  • 能用 DOM + Fetch 完成一个最小交互闭环
  • 能区分 ECMAScript 规范与浏览器/Node 宿主能力

认知跳跃提醒

  1. 未理解作用域就学闭包 → 先 1.12 / 1.13 / 1.14
  2. 未理解原型就学 class 继承 → 先 2.7 / 2.8 / 2.12
  3. 未理解事件循环就堆 async 库 → 先 4.3 / 4.6 / 4.7
  4. 未理解模块边界就上 monorepo → 先 3.2 / 3.3 / 5.1

相关入口

自测题

  1. 为什么异步阶段要放在模块与错误之后？
  2. 浏览器 API 为什么不放在阶段一？
  3. 若时间有限，优先抓哪 8 个主干？
答案
  1. 异步代码的正确性依赖错误传播与模块边界，否则只会写出“能跑但不可维护”的回调网。
  2. DOM/BOM 是宿主能力，应先建立语言心智再叠加宿主。
  3. 作用域、引用语义、闭包、原型链、this、Promise/async、事件循环、ESM。

BodySense 项目实战入口（把异步/流式路线落到真实代码）

[!info] BodySense 的 AI 回复是 SSE 流式返回的。下面的代码正是你学「Fetch / ReadableStream / 增量解码 / NDJSON·SSE / AbortController」时最好的活样本。阅读顺序：代码注释 → 对应笔记 → 回看代码。

想练的知识点去看的代码（仓库内相对路径）对应笔记
fetch + ReadableStream 读取流式响应apps/web/src/features/consultation/hooks/useSSEProcessor.tsWeb Streams 增量解码 · NDJSON/SSE 协议边界
跨 chunk 的 Unicode 代理对断裂同上（解码段）Web Streams 增量解码
AbortController 在卸载/重连时取消流同上（取消段）AbortController 取消
网络字节 → unknown → 收窄为 StreamEventpackages/contracts/src/stream-events.ts 与 useSSEProcessor.ts编译期 vs 运行时边界
  • 流式链路教材（仓库内）：docs/learning/06-javascript-typescript-streaming.md
  • 由易到难的实战任务（仓库内）：docs/learning/05-practice-tasks.md
  • 跨语言对照（Go/Python 如何处理同一契约）：Go 学习路线 · Python 学习路线 · BodySense MOC
创建于 2026/7/15 更新于 2026/7/29