JavaScript 分阶段完整学习路线

整体分 6 大阶段，由浅入深，适配自学 / 面试复习，每阶段标注必掌握、选学、手写练习题

阶段一：JS 基础语法（入门，1～2 周）

核心知识点

1. 变量声明：var/let/const、变量提升、块级作用域
2. 8 大基础数据类型，原始值 vs 引用值
3. 类型转换、相等判断== / === / Object.is
4. 类型检测：typeof、toString、instanceof
5. 各类运算符：算术、逻辑、空值合并??、可选链?.、展开符...
6. 流程控制：if、switch、for/for in/for of、while、break/continue
7. 基础数组、对象增删改查

重难点

• let/const 暂时性死区
• 隐式类型转换坑点（[] == ![]等）
• for in 和 for of 区别

配套练习

1. 交换两个变量（不使用中间变量）
2. 判断输入是否为有效数字
3. 数组去重（基础版）
4. 遍历对象所有属性并打印

验收标准

随便给一段混合类型代码，能准确说出输出结果。

阶段二：函数 + ES6+ 核心特性（核心，2～3 周）

核心知识点

1. 函数声明、表达式、IIFE、箭头函数
2. 形参、默认参数、剩余参数、arguments
3. this 基础指向、call/apply/bind
4. 作用域、作用域链、闭包概念与场景
5. 高阶函数、回调函数
6. ES6 必学：解构、模板字符串、对象简写
7. Set / Map / WeakSet / WeakMap
8. class、extends、super、私有字段#
9. 模块化 import /export

重难点

• 箭头函数无 this、无 arguments、不能做构造函数
• 闭包内存泄漏问题
• WeakMap 弱引用特性

配套手写练习

1. 手写 call /apply/bind
2. 实现一个简单计数器（闭包）
3. 使用 Set 数组去重
4. 类实现简单继承

验收标准

能独立解释闭包用途，分清各类场景下 this 指向。

阶段三：异步编程 + Event Loop（面试高频，2 周）

核心知识点

1. 同步 / 异步、阻塞非阻塞概念
2. 回调函数、回调地狱
3. Promise：三种状态、then/catch/finally、链式调用
4. Promise API：all / race / allSettled / any
5. async /await + try catch 异常处理
6. 宏任务、微任务、浏览器事件循环完整流程
7. 定时器 setTimeout /setInterval/requestAnimationFrame
8. 异步并发控制（串行、批量并行）

重难点

• 事件循环执行顺序（微任务优先于宏任务）
• async/await 本质是 Promise 语法糖
• Promise 链式错误穿透

配套手写练习

1. 完整手写 Promise（含 then、catch、all、race）
2. 异步请求串行执行函数
3. 根据打印顺序分析 Event Loop 代码输出

验收标准

任意一段混合定时器 + Promise 代码，能精准说出打印顺序。

阶段四：DOM+BOM 浏览器 API（前端实操，2 周）

核心知识点

BOM

window、location、history、navigator localStorage /sessionStorage/cookie 窗口尺寸、滚动、页面跳转、弹窗

DOM

1. DOM 节点获取、增删改查、克隆、替换
2. class、style、dataset、属性操作
3. 事件流：捕获、目标、冒泡
4. addEventListener、event 对象、阻止冒泡 / 默认行为
5. 事件委托（事件代理）原理与封装
6. 表单操作、滚动、图片懒加载基础

重难点

• 事件委托适用场景与限制
• 重绘、回流基础概念
• storage 存储限制、cookie 特性

配套手写练习

1. 封装通用事件委托函数
2. 简易图片懒加载实现
3. 获取页面滚动距离、可视区域大小

验收标准

不用框架，原生 JS 完成简单 Tab 切换、轮播基础逻辑。

阶段五：原型、面向对象、高级 API（进阶，2～3 周）

核心知识点

1. prototype、__proto__、构造函数、原型链
2. 四种继承方式优缺点
3. Object.defineProperty、get/set（Vue2 响应式原理）
4. Proxy + Reflect（Vue3 响应式）
5. 深浅拷贝原理
6. 正则表达式：元字符、分组、预查、表单校验
7. 防抖、节流原理
8. 设计模式：发布订阅、单例、工厂模式

重难点

• 原型链查找机制
• 循环引用下深拷贝处理
• Proxy 与 defineProperty 差异

配套手写练习

1. 手写 instanceof
2. 浅拷贝、可处理循环引用的深拷贝
3. 防抖、节流函数
4. 简易发布订阅（事件总线）
5. 简单 Proxy 数据劫持

验收标准

能完整画出原型链结构图，手写响应式基础代码。

阶段六：网络、Node、工程化、TypeScript（就业必备，3～4 周）

模块 1：浏览器网络

1. AJAX XMLHttpRequest、Fetch API
2. 同源策略、跨域：CORS、JSONP、代理
3. HTTP 基础、Token、请求拦截封装

模块 2：Node.js 基础

1. Node 事件循环（与浏览器区分）
2. 核心模块 fs /path/http / EventEmitter
3. CommonJS 模块化、Buffer、Stream 流
4. npm/pnpm、package.json

模块 3：前端工程化

1. 模块化规范：CommonJS / ESM / UMD
2. Webpack 基础配置、Loader、Plugin
3. Vite 基础原理
4. ESLint + Prettier 代码规范

模块 4：TypeScript

基础类型、接口、泛型、枚举、类型推断、类型体操入门

模块 5：性能与安全

1. 垃圾回收、栈 / 堆内存、内存泄漏场景
2. XSS、CSRF 防护方案
3. 减少重绘回流、虚拟列表思路

配套手写练习

1. 封装通用 Fetch 请求（超时、错误拦截）
2. 简易静态文件服务器（Node http+fs）
3. 手写简易前端路由

验收标准

能独立搭建基础 Webpack 项目，看懂 TS 基础类型代码。

通用高频手写题库（面试必刷，全部阶段结束后集中练）

1. call / apply / bind
2. 防抖、节流
3. 深浅拷贝（循环引用版）
4. Promise 全套实现
5. 数组 reduce、flat
6. instanceof
7. 事件总线（发布订阅）
8. 简易 AJAX 请求封装
9. 简易虚拟 DOM
10. 简单路由实现

学习节奏规划（总周期约 3 个月）

1. 第 1 个月：阶段一 + 阶段二（基础 + ES6 + 函数）
2. 第 2 个月：阶段三 + 阶段四（异步 + DOM 浏览器）
3. 第 3 个月：阶段五 + 阶段六（原型高级 + Node / 工程化 / TS）

避坑学习建议

1. 不要跳过 Event Loop、原型链，这是面试核心难点
2. 每学完一块必须手写代码，只看不学极易遗忘
3. 先原生 JS 吃透，再接触 Vue/React 框架，底层一通百通
4. 异步、原型、this 三块反复复盘，是区分初级 / 中级前端分水岭