JavaScript完整组成拆解

你每天写 JS，但你知道一行console.log('hello')背后，需要多少组件配合才能跑起来吗？本文用"工厂生产线"的类比，从语言内核、JS 引擎、运行时环境到内存管理，带你完整拆解 JavaScript 的全部组成，建立体系化的 JS 认知。一、先建立直觉：JS 运行 = 一座工厂在运转想象 JavaScript 是一座代码加工厂，你把代码（订单）扔进去，它输出执行结果（产品）。这座工厂由三大区域组成：┌─────────────────────────────────────────────────┐ │ JS 运行时（整个厂区） │ │ ┌──────────┐ ┌──────────┐ ┌───────────────┐ │ │ │ 语言内核 │ │ JS 引擎 │ │ Web/Node API │ │ │ │ (语法规则)│ │ (生产线) │ │ (外协部门) │ │ │ └──────────┘ └──────────┘ └───────────────┘ │ │ ┌──────────┐ ┌──────────┐ ┌───────────────┐ │ │ │ 调用栈 │ │ 堆内存 │ │ 事件循环调度 │ │ │ │ (流水线) │ │ (仓库) │ │ (调度室) │ │ │ └──────────┘ └──────────┘ └───────────────┘ │ └─────────────────────────────────────────────────┘很多人以为 JS = 语法 + API，其实远远不够。完整的 JS 运行体系由四层组成：语言内核（ECMAScript）：语法规则、类型系统、核心机制JS 引擎（Engine）：解析、编译、执行代码的核心机器运行时环境（Runtime）：引擎 + API + 事件循环 + 内存执行机制：调用栈、事件循环、宏任务微任务的调度规则下面我们一层层拆开来看。第一部分：语言内核——ECMAScript 规定了什么？二、第一层：语法与词法——代码怎么写才算"合法"2.1 从字符到抽象语法树你写的 JS 代码本质是一串字符，引擎拿到后第一步是分词（Tokenize），把字符切成一个个有意义的"词"：consta=1+2;被切成：const、a、=、1、+、2、;七个 Token。然后第二步是解析（Parse），把 Token 组织成一棵树，叫抽象语法树（AST）：VariableDeclaration / \ kind: const declarations | VariableDeclarator / \ id: a init: BinaryExpression / \ operator: + left: 1 right: 2💡 你用过的 Babel、ESLint、Webpack、Prettier，底层全都是操作 AST。理解了 AST，就理解了所有前端工具的底层原理。2.2 语法规则是谁定的？JS 的语法标准叫ECMAScript，由 TC39 委员会每年更新一个版本（ES2015、ES2016……）。注意一个常见误区：ECMAScript ≠ JavaScript。ECMAScript 是标准，JavaScript 是这个标准的实现。除了 JavaScript，还有 JScript、ActionScript 等都是 ECMAScript 的实现。三、第二层：类型系统——JS 的八种数据类型很多人以为 JS 类型很简单，其实里面门道不少。3.1 八种数据类型类型分类具体类型存在哪里原始类型（7种）Undefined、Null、Boolean、Number、String、Symbol、BigInt栈内存引用类型（1种）Object（包含 Array、Function、Date、RegExp 等）堆内存3.2 原始类型的几个冷知识1. typeof null === ‘object’ 是历史遗留 bug这是 JS 最著名的 bug，因为最初用 32 位存类型标签，000代表对象，而 null 全是 0，被误判为对象。改了会破坏无数老网站，所以一直留到现在。2. Number 不是整数，是双精度浮点数JS 所有数字都是 64 位浮点数（IEEE 754），所以才有经典的0.1 + 0.2 !== 0.3。整数安全范围是-(2^53-1)到2^53-1，超过就用 BigInt。3. String 是不可变的字符串一旦创建就不能改。str.toUpperCase()不是改原字符串，而是返回一个新字符串。3.3 引用类型为什么存在堆里？原始类型大小固定、占空间小，放在栈里存取快。对象大小不固定、可能很大，放在堆里灵活分配。变量存的只是堆内存的地址（引用），所以叫"引用类型"。这也是为什么两个内容一样的对象{} === {}返回 false——比的是地址，不是内容。四、第三层：三大核心机制——作用域、原型、this这三个是 JS 最核心也最容易搞混的机制，面试必考。4.1 作用域与闭包作用域就是"变量的有效范围"。JS 采用词法作用域（静态作用域）：变量作用域在写代码时就定了，和执行顺序无关。constx=1;