JavaScript 知识体系导图
一、JS基础深入（入门与进阶）
1. 变量类型与内存机制
基本类型（7种）：String、Number、Boolean、Undefined、Null、Symbol、BigInt（特性：不可变、栈存储）
引用类型：Object（包含Array、Function、Date、RegExp等，特性：可变、堆存储，栈存引用地址）
类型判断：typeof（局限性）、instanceof（原型链判断）、Object.prototype.toString.call（最准确）
内存相关：栈内存vs堆内存、垃圾回收机制（标记清除、引用计数）、内存泄漏场景及解决
原始值包装对象：String/Number/Boolean包装类，自动装箱与拆箱
2. 原型与原型链（核心难点）
核心关联：__proto__（实例属性，指向原型）、prototype（构造函数属性，原型对象）、constructor（原型对象属性，指向构造函数）
原型链查找规则：实例查找属性→自身→__proto__指向的原型→原型的__proto__→...→Object.prototype→null
继承方式（重点对比）：
原型继承：子构造函数.prototype = new 父构造函数()
构造函数继承：子构造函数内call/apply父构造函数
组合继承：原型继承+构造函数继承（解决原型污染、属性重复问题）
ES6 Class继承：extends+super（语法糖，本质还是原型继承）
常见要点：instanceof原理、原型链断裂问题、Object.create原理
3. 作用域与闭包（进阶要点）
作用域类型：全局作用域、函数作用域、块级作用域（let/const实现，ES6新增）
核心概念：词法作用域（定义时确定，与执行位置无关）、变量提升（
var声明提升并预置undefined；let/const同样会提升绑定但处于暂时性死区（TDZ），声明前不可访问）闭包：
原理：函数嵌套，内层函数引用外层函数的变量/作用域，外层函数执行后，内层函数仍能访问其作用域
作用：数据私有化、延长变量生命周期（如防抖节流、模块化）
优缺点：优点（私有化、复用），缺点（内存泄漏风险，需手动释放）
常见场景：手写防抖/节流、模块化封装、回调函数中的闭包
4. this指向（重点）
不同场景this指向：
普通函数：非严格模式指向window，严格模式指向undefined
对象方法：指向调用该方法的对象
构造函数：new调用时，指向新创建的实例
箭头函数：无自身this，继承外层作用域的this（不绑定this，不能作为构造函数）
事件绑定：指向触发事件的DOM元素
改变this指向：call（参数列表）、apply（参数数组）、bind（返回新函数，不立即执行）
手写call/apply/bind原理
5. 变量提升与暂时性死区
变量提升：var声明的变量会提升到作用域顶部，初始化undefined；函数声明也会提升（优先级高于var）
暂时性死区（TDZ）：let/const声明的变量，在声明前访问会报错，避免变量提升带来的问题
常见典型题：var/let/const 的区别、变量提升相关练习（如输出结果题）
二、JS异步编程（进阶核心）
1. 异步发展史（理解逻辑）
第一阶段：回调函数（缺点：回调地狱，可读性差、可维护性差）
第二阶段：Promise（解决回调地狱，链式调用，三种状态不可逆）
第三阶段：Generator（函数暂停/恢复，配合yield，可实现异步流程控制）
第四阶段：async/await（Promise的语法糖，同步写法实现异步，可读性最优）
2. EventLoop事件循环（核心难点）
核心原理：JS是单线程，通过EventLoop实现异步执行，避免阻塞
任务队列分类：
宏任务（macrotask，教学划分）：首轮脚本、setTimeout/setInterval 回调、setImmediate（Node）、MessageChannel、DOM 事件回调等；网络请求完成后的回调作为任务入队，不宜简单说「AJAX = 宏任务」。
微任务（microtask）：Promise.then/catch/finally、queueMicrotask、MutationObserver；
await之后的代码等价挂到 Promise 微任务。Node 另有 process.nextTick，先于其他微任务执行。
执行顺序：跑完当前同步代码 → 清空本轮微任务 → 再取下一个宏任务；每个宏任务结束后再次清空微任务，循环往复（与「先同步再微再宏」的心智模型一致，首轮脚本可视作第一个任务单元）。
常见要点：浏览器与Node环境EventLoop的区别、异步输出结果辨析（建议练习）
3. Promise深入（重点）
核心特性：三种状态（Pending→Fulfilled/Rejected，不可逆）、链式调用（then返回新Promise，可链式串联）
静态方法（重点）：
Promise.all()：所有Promise成功才成功，一个失败则整体失败（返回结果数组，顺序与传入一致）
Promise.race()：以最先 settled 的 Promise 为准（先 fulfilled 则成功，先 rejected 则失败）
Promise.allSettled()：所有Promise都完成（无论成功/失败），返回每个Promise的状态和结果
Promise.any()：只要有一个Promise成功就成功，所有失败才失败（与race区别）
手写Promise：实现基本状态切换、then链式调用、catch捕获错误、静态方法
常见问题：Promise穿透、then回调异步执行原因、错误捕获机制
4. async/await（常见应用）
核心特性：async修饰函数，返回Promise；await只能在async函数内使用，等待Promise完成（阻塞当前函数，不阻塞全局）
错误处理：try/catch捕获await的错误（单个/多个await的错误处理方式）
并发与串行：多个await串行执行、Promise.all配合await实现并发执行
常见场景：异步数据请求、复杂异步流程控制
5. 其他异步相关
防抖（debounce）：触发后延迟n秒执行，期间再次触发则重置延迟（如搜索输入、窗口resize）
节流（throttle）：n秒内只执行一次，控制执行频率（如滚动加载、按钮点击防重复）
手写防抖/节流（基础版+优化版，考虑立即执行、取消功能）
三、DOM & BOM & 浏览器原理（高级拓展）
1. DOM相关
DOM渲染流程：解析HTML→生成DOM树→解析CSS→生成CSSOM树→合成渲染树（Render Tree）→布局（Layout）→绘制（Paint）
DOM操作：
获取DOM：getElementById、querySelector、getElementsByClassName（区别：静态/动态集合）
操作DOM：创建、插入、删除、修改节点（性能优化：文档片段DocumentFragment）
DOM事件：事件流（捕获→目标→冒泡）、事件委托（事件冒泡的应用，优化性能）
DOM性能优化：减少DOM操作、避免重排（Reflow）和重绘（Repaint）、使用requestAnimationFrame
2. BOM相关
核心对象：window、document、location、history、navigator、screen
常用API：
location：href、hash、search、replace()、reload()
history：pushState()、replaceState()、go()、back()（前端路由原理）
window：setTimeout/setInterval、clearTimeout/clearInterval、alert/confirm/prompt
3. 浏览器原理（常见拓展）
同源策略：协议、域名、端口一致，限制跨域请求（目的：安全）
跨域解决方案：
前端：JSONP（利用script标签跨域，仅支持GET）、CORS（后端配置，主流方案）
后端：代理转发（如Nginx代理、Node.js代理）、postMessage（跨窗口/iframe跨域）
浏览器缓存：强缓存（Cache-Control、Expires）、协商缓存（ETag、Last-Modified）
HTTP相关：HTTP状态码、请求方法（GET/POST区别）、HTTP/HTTPS区别
四、JS高级特性与实战（体现能力）
1. ES6+核心特性（重点）
let/const：块级作用域、不可重复声明、const常量（引用类型可修改内部属性）
箭头函数：简化语法、无自身this、无arguments、不能作为构造函数
解构赋值：数组解构、对象解构（简化赋值，常用在参数传递、对象取值）
模板字符串：``包裹，支持换行、变量插值${}、表达式
数组方法：forEach、map、filter、reduce、find、some、every（重点：reduce的多种用法）
对象拓展：Object.assign()、Object.keys/values/entries()、对象简写、可选链操作符?.、空值合并运算符??
Symbol：唯一值，用于对象属性（避免属性冲突）、Symbol.iterator（迭代器）
Set/Map：Set（无重复值，常用去重）、Map（键可以是任意类型，区别于对象）
2. 迭代器与生成器
迭代器（Iterator）：实现Iterator接口（next()方法），用于遍历可迭代对象（数组、Set、Map等）
生成器（Generator）：function* 定义，yield暂停执行，next()恢复执行，可实现异步流程控制
3. 模块化（ES6 Module）
核心语法：import（导入）、export（导出，默认导出export default、按需导出export）
模块化优点：代码复用、隔离作用域、避免命名冲突
与CommonJS的区别：ES6 Module静态导入（编译时确定）、CommonJS动态导入（运行时确定）
4. 手写代码（实战重点）
基础手写：call/apply/bind、Promise、防抖/节流
数组相关：数组去重、数组扁平化、数组深拷贝、实现reduce方法
对象相关：深拷贝（考虑循环引用）、对象合并、实现instanceof
异步相关：手写Promise.all、实现async/await（基于Generator+Promise）
五、工程化与性能优化
1. JS工程化
构建工具：Webpack、Vite（区别：打包原理、性能对比，JS打包优化）
代码规范：ESLint（语法检查）、Prettier（格式化）、husky（Git hooks，提交校验）
TypeScript：与JS的区别、类型定义（基础类型、接口、泛型、联合类型）、TS在项目中的应用
2. JS性能优化
代码层面：减少冗余代码、避免全局变量、合理使用闭包、优化循环（减少循环次数）
异步优化：合理使用Promise/async/await、避免回调地狱、控制并发请求数量
加载优化：代码分割（code splitting）、懒加载、预加载、CDN引入第三方库
其他：避免内存泄漏、使用requestAnimationFrame优化动画、Web Worker处理耗时任务（避免阻塞主线程）