WHY IT MATTERS
先用一句白话理解
JavaScript 主线程像只有一位服务员的小店：同步任务要按顺序处理，耗时操作交给外部系统，完成后再把回调排进任务队列。理解排队规则，异步就不再像魔法。
LEARNING OUTCOMES
学完你能做到什么
准确判断值、引用、类型转换和相等性带来的结果
用作用域、闭包、this 和原型解释常见代码行为
使用模块、纯函数和明确的数据流组织中型应用
用 Promise、async/await 和错误处理编写可靠异步流程
读懂事件循环中同步代码、微任务与任务的执行顺序
CONCEPT DEEP DIVE
把每个核心概念讲透
不要把知识点当作名词列表。下面每一项都要回到真实项目中回答：它解决什么问题，如何验证，以及在哪些条件下会失效。
原始值、对象、引用、类型转换与严格相等
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“开发无框架任务看板，支持新增、筛选、拖动、撤销/重做、异步加载和本地保存，并用模块隔离状态、视图和数据访问。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
函数、词法作用域、闭包、this 与执行上下文
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“开发无框架任务看板，支持新增、筛选、拖动、撤销/重做、异步加载和本地保存，并用模块隔离状态、视图和数据访问。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
原型链、类、组合、Map、Set 与常用数组方法
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“开发无框架任务看板，支持新增、筛选、拖动、撤销/重做、异步加载和本地保存，并用模块隔离状态、视图和数据访问。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
不可变更新、状态机思维与错误边界
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“开发无框架任务看板，支持新增、筛选、拖动、撤销/重做、异步加载和本地保存，并用模块隔离状态、视图和数据访问。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
ES Modules、动态 import 与模块依赖
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“开发无框架任务看板，支持新增、筛选、拖动、撤销/重做、异步加载和本地保存，并用模块隔离状态、视图和数据访问。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
事件循环、任务、微任务、Promise 与 async/await
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“开发无框架任务看板，支持新增、筛选、拖动、撤销/重做、异步加载和本地保存，并用模块隔离状态、视图和数据访问。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
迭代器、生成器、异步迭代与资源清理
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“开发无框架任务看板，支持新增、筛选、拖动、撤销/重做、异步加载和本地保存，并用模块隔离状态、视图和数据访问。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
垃圾回收、事件监听器和常见内存泄漏
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“开发无框架任务看板，支持新增、筛选、拖动、撤销/重做、异步加载和本地保存，并用模块隔离状态、视图和数据访问。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
CONCEPT MAP
这一章的学习步骤
手写并解释一个闭包驱动的状态容器
不运行代码也能判断典型事件循环题的输出顺序
把单文件脚本拆成职责清晰的原生 ES 模块
为网络失败、超时和空数据提供明确用户反馈
HANDS-ON PROJECT
动手任务
开发无框架任务看板，支持新增、筛选、拖动、撤销/重做、异步加载和本地保存，并用模块隔离状态、视图和数据访问。
交付清单
- ✓可操作的任务看板
- ✓状态转移图和模块依赖图
- ✓至少五个异常场景及处理结果
- ✓一篇事件循环实验记录
MINIMUM RUNNABLE CODE
亲手观察同步任务、微任务和任务
console.log("1：同步开始");
setTimeout(() => console.log("4：任务队列"), 0);
Promise.resolve().then(() => {
console.log("3：微任务");
});
console.log("2：同步结束");
// 输出顺序固定为 1、2、3、4。可直接粘贴到浏览器 Console。先让它跑起来，再逐行修改。最有效的学习方式，是观察你的改动如何影响结果。
DELIBERATE PRACTICE
三级练习：从复现到生产
每一级都比上一级少一点提示、多一点约束。只有在不看答案也能完成验收时，知识才真正变成能力。
让核心机制第一次跑通
- 手写并解释一个闭包驱动的状态容器
- 不运行代码也能判断典型事件循环题的输出顺序
- 把单文件脚本拆成职责清晰的原生 ES 模块
- 为网络失败、超时和空数据提供明确用户反馈
改变约束，验证你真的理解
- 不看教程，独立完成：准确判断值、引用、类型转换和相等性带来的结果
- 不看教程，独立完成：用作用域、闭包、this 和原型解释常见代码行为
- 不看教程，独立完成：使用模块、纯函数和明确的数据流组织中型应用
- 不看教程，独立完成：用 Promise、async/await 和错误处理编写可靠异步流程
- 不看教程，独立完成：读懂事件循环中同步代码、微任务与任务的执行顺序
把实验变成能交付的工程
- 可操作的任务看板
- 状态转移图和模块依赖图
- 至少五个异常场景及处理结果
- 一篇事件循环实验记录
- 检查兼容性、可访问性、性能、安全与渐进增强，并把检查结果写进项目复盘。
COMMON PITFALLS
最容易踩的坑
混淆对象变量本身和它所引用的数据
在业务代码中依赖隐式类型转换
用 async/await 后忘记处理拒绝、取消和竞态
把所有状态、DOM 操作和请求都塞进一个文件
SELF CHECK
先回答，再展开参考答案
Q01这一课最核心的业务目标是什么？＋
用可观察的小实验理解类型、作用域、闭包、原型和事件循环，再把这些知识装进一个真正有状态的应用。你会知道代码为什么工作，也知道它为什么会在边界条件下失败。
Q02如果只能保留三个验收结果，应该保留什么？＋
可操作的任务看板；状态转移图和模块依赖图；至少五个异常场景及处理结果
Q03学习过程中最需要主动避免什么？＋
混淆对象变量本身和它所引用的数据；在业务代码中依赖隐式类型转换；用 async/await 后忘记处理拒绝、取消和竞态；把所有状态、DOM 操作和请求都塞进一个文件
Q04怎样证明你不是“看懂了”，而是真的会做？＋
独立完成“开发无框架任务看板，支持新增、筛选、拖动、撤销/重做、异步加载和本地保存，并用模块隔离状态、视图和数据访问。”，并用测试、数据或运行结果逐项验收交付清单。
本课完成检查表
全部能打勾，再进入下一课。
- □目标明确：准确判断值、引用、类型转换和相等性带来的结果
- □核心机制已用最小实验验证：手写并解释一个闭包驱动的状态容器
- □风险已检查：混淆对象变量本身和它所引用的数据
- □风险已检查：在业务代码中依赖隐式类型转换
- □风险已检查：用 async/await 后忘记处理拒绝、取消和竞态
- □风险已检查：把所有状态、DOM 操作和请求都塞进一个文件
- □交付物可复现：可操作的任务看板
- □交付物可复现：状态转移图和模块依赖图
- □交付物可复现：至少五个异常场景及处理结果
- □交付物可复现：一篇事件循环实验记录
PRIMARY SOURCES
继续深入的官方资料
课程版本基线：2026 年 7 月。涉及版本号时，以链接中的官方文档为最终依据。