知识库 ts-knowledge-base

JavaScript 知识图谱

一、一句话结论

JavaScript 体系分六层看：语言核心 → 异步模型 → 浏览器与 DOM → 平台 API → Node.js → 前端工程化；它的一切行为差异都源于两个设计——单线程事件循环（并发靠异步不靠多线程）和基于原型的动态类型（一切运行时可变）。

二、原理与来由（分层依据）

JS 生而为浏览器脚本：单线程 + 事件循环是为了在无锁前提下跑 UI；动态与原型是为极简起步。后来它跑到服务器（Node.js）与各种运行时，但执行模型没变——同步代码跑完才清空任务队列。分层依据是运行环境逐层放大：语言核心任何环境都一样 → 异步模型跨端一致 → 浏览器 DOM 与平台 API 只在 Web 有 → Node.js 补服务器能力 → 工程化解决规模化协作。排查 JS 问题的顺序：值与引用、this 的语义查语言层；执行顺序查异步层；页面行为查 DOM 层；构建产物查工程层。

三、细节与用法

① 语言核心

主题 一句话要点 检索关键词
类型与转换 7 种原始类型 + object；== 触发隐式转换（避用），=== 严格相等；falsy 值只有 8 个（false、0、-0、0n、""、null、undefined、NaN） 类型转换、相等性、falsy
作用域与闭包 词法作用域在书写时确定；闭包 = 函数 + 其词法环境，是模块模式与柯里化的地基；var 提升是历史坑，let/const 块级 闭包、词法作用域、TDZ
原型与 this 属性查找沿原型链；class 是原型继承的语法糖；this 四种绑定：默认、隐式、显式（call/apply/bind）、new；箭头函数没有 this 取外层 原型链、class、this 绑定
解构与展开 解构赋值（含默认值、重命名）、展开运算符做浅拷贝与合并；rest 收集剩余参数 解构、展开、浅拷贝
模块 ESM（import/export，静态可分析、顶层 this 为 undefined）vs CJS（require，运行时加载）；动态导入 import() 返回 Promise ESM、CJS、动态导入

② 异步模型（单线程的心脏）

主题 一句话要点 检索关键词
事件循环 调用栈清空 → 清空全部微任务 → 取一个宏任务，循环；微任务（Promise 回调、queueMicrotask）插队到下一宏任务前 事件循环、执行顺序
Promise 三态不可逆；.then 链式传值，错误沿链冒泡；Promise.all（一败全败）/ allSettled / race / any Promise、组合器
async/await Promise 的同步写法语法糖；await 等价 .then，try/catch 等价 .catch；并发用 Promise.all 而非串行 await async、await、并发
定时器 setTimeout(fn, 0) 仍晚于所有微任务；嵌套定时器与未清理定时器是泄漏与卡顿常见源 setTimeout、宏任务

③ 浏览器与 DOM

主题 一句话要点 检索关键词
DOM 操作 querySelector 现代选择器 API；批量改 DOM 用 DocumentFragment 或一次性替换（避免布局抖动）；MutationObserver 监听变更 DOM、重排重绘
事件模型 捕获 → 目标 → 冒泡；addEventListener 第三参控制阶段；事件委托 = 冒泡 + closest 判源，列表性能标准解 事件委托、冒泡捕获
存储 cookie（随请求携带、4KB）、localStorage（持久）、sessionStorage（标签页级）、IndexedDB（大结构化数据）；三 Cookie 属性 SameSite/Secure/HttpOnly 存储、Cookie
跨域 同源策略管的是响应不响应；CORS 是标准解（预检 OPTIONS + 白名单头）；JSONP、代理转发是历史/工程方案 CORS、预检、跨域

④ 平台 API（Web 平台能力）

主题 一句话要点 检索关键词
fetch Promise 风格 HTTP；默认不带 cookie（credentials 显式开）；fetch 的 4xx/5xx 不 reject，要手动查 res.ok fetch、res.ok
WebSocket / SSE WebSocket 双向长连（握手升级协议）；SSE 单向服务器推（EventSource，自动重连）；按方向选 WebSocket、SSE
Web Worker 真后台线程，postMessage 通信，不能碰 DOM；大数据解析、加解密的卸载方案 Worker、离屏渲染

⑤ Node.js（JS 的服务器端）

主题 一句话要点 检索关键词
运行模型 事件循环 + 非阻塞 I/O（libuv 线程池兜底磁盘等阻塞调用）；「单线程」指 JS 执行，I/O 是多路复用 libuv、事件循环阶段
模块与包 CJS 与 ESM 并存（.mjs/.cjs 或 package.json type）；npm 语义化版本与 lockfile；node_modules 扁平化与幽灵依赖 npm、幽灵依赖
流 Stream 四类型（Readable/Writable/Duplex/Transform）；大文件处理用管道不进内存；背压靠 pipe 自动处理 Stream、背压
常用内置 fs/promises、path、crypto、http；进程级 process.env / 信号处理 fs、path、信号

⑥ 前端工程化

主题 一句话要点 检索关键词
构建 Vite（dev 原生 ESM + esbuild 预构建，rollup 打包）是当前默认选择；Webpack 仍是存量主流 Vite、Webpack、构建
框架生态 React（组件 + hooks）/ Vue（响应式 + SFC）两大主线；框架解决的是状态 → 视图映射与更新调度 React、Vue、响应式
规范与质量 ESLint（规则）+ Prettier（格式）；ESM 时代的 lint 边界 ESLint、Prettier

版本演进速查（锚点：ES2015）

版本 年份 代表特性
ES2015（ES6） 2015 let/const、class、模块、Promise、箭头函数、解构——现代 JS 分水岭
ES2017–2020 2017–2020 async/await、可选链 ?.、空值合并 ??、BigInt、globalThis
ES2021–2023 2021–2023 顶层 await、Object.hasOwn、数组 findLast、ShadowRealm 提案中
ES2024+ 2024– Object.groupBy、正则 v 标志、Iterator helpers；逐年小步迭代

四、流程图（图谱一页图）

flowchart TD
    subgraph S1["① 语言核心"]
        A1["类型 · 作用域 · 闭包"]
        A2["原型链 · this · class"]
        A3["模块 ESM/CJS"]
    end
    subgraph S2["② 异步模型"]
        B1["事件循环"]
        B2["Promise · async/await"]
        B3["微任务 · 宏任务"]
    end
    subgraph S3["③ 浏览器与 DOM"]
        C1["DOM · 事件委托"]
        C2["存储 · 跨域 CORS"]
    end
    subgraph S4["④ 平台 API"]
        D1["fetch"]
        D2["WebSocket · SSE · Worker"]
    end
    subgraph S5["⑤ Node.js"]
        E1["libuv 事件循环"]
        E2["Stream · 背压"]
        E3["npm · 幽灵依赖"]
    end
    subgraph S6["⑥ 前端工程化"]
        F1["Vite · Webpack"]
        F2["React · Vue"]
        F3["ESLint · Prettier"]
    end
    S1 -->|"单线程事件循环承载"| S2
    S2 ~~~ S3
    S3 ~~~ S4
    S4 ~~~ S5
    S5 ~~~ S6

层间竖排是阅读顺序；①② 在所有 JS 运行环境里一致，③④ 仅浏览器，⑤ 仅 Node.js。

五、边界与关联

六、出处

来源 位置 核实日期
MDN Web Docs（语言与浏览器 API 的权威参考） developer.mozilla.org 2026-10-08
TC39 提案进度（ECMAScript 版本特性以提案为准） tc39.es / github.com/tc39 2026-10-08
个人实践（前端与 Node.js 开发经验） 各层一句话要点为经验浓缩 2026-10-08

七、存疑与待办