WangQuan's Blog

Appearance

JavaScript 总览 ​

JavaScript 是前端开发最核心的语言之一。

很多人刚接触时，会把它理解成“给页面加交互的脚本语言”；但在真实项目里，它承担的事情其实更多：

  1. 页面交互与状态更新
  2. 浏览器中的异步调度
  3. 模块组织与依赖管理
  4. 与 DOM、BOM、网络请求等运行时能力的连接

如果只从零散语法点入手，通常会越学越碎。更好的办法是把整体框架搭起来，再按专题往下看。

1. 先建立 JavaScript 的整体认识 ​

可以把 JavaScript 理解成三层：

  1. 语言层
    • 值、对象、函数、作用域、原型、类、模块
  2. 执行层
    • 执行上下文、调用栈、事件循环、异步任务调度
  3. 运行时层
    • 浏览器提供的 DOM、BOM、定时器、事件系统、网络接口

也就是说，很多我们日常写的代码，看起来都是 JavaScript，但实际上往往是：JavaScript 语言本身 + 浏览器运行时能力 + 工程化模块体系

2. JavaScript 主要解决什么问题 ​

JavaScript 并不只是“写几个点击事件”。

在现代前端里，它真正解决的问题包括：

  1. 如何表达数据和行为
  2. 如何组织对象之间的复用关系
  3. 如何处理异步任务和状态变化
  4. 如何把不同文件、不同模块拼成一套可维护的应用
  5. 如何和浏览器环境协作完成页面渲染、事件响应和网络通信

所以 JavaScript 难的地方，通常不在于单个语法点，而在于：多个机制叠在一起之后，执行结果为什么会是现在这样。

3. 这部分笔记会怎么拆 ​

为了让结构更稳定，这个目录采用“总览 + 多专题”的方式。

当前先按下面 7 部分展开：

  1. 数据类型、值与类型转换
  2. 函数、作用域、this 与闭包
  3. 对象、原型链、class 与继承
  4. 执行上下文、调用栈与事件循环
  5. Promise、async/await 与异步编程
  6. 运行环境：浏览器、Node.js 与宿主能力
  7. ECMAScript 版本演进与兼容性

其中，模块化保留为前端独立导航入口：

  1. 模块化

后续如果目录继续扩展，还可以再补：

  1. DOM 与事件系统
  2. 错误处理与调试
  3. 浏览器存储与缓存
  4. 函数式编程与常见设计模式

4. 推荐阅读顺序 ​

如果你想系统一点地整理 JavaScript，阅读顺序：读：

  1. 看“数据类型、值与类型转换”
  2. 再看“函数、作用域、this 与闭包”
  3. 接着看“对象、原型链、class 与继承”
  4. 然后补“执行上下文、调用栈与事件循环”
  5. 再进入“Promise、async/await 与异步编程”
  6. 再看“运行环境：浏览器、Node.js 与宿主能力”
  7. 再看“ECMAScript 版本演进与兼容性”
  8. 再转到“模块化”

这样安排主要是因为：

  1. 先理解值和对象，才能看懂函数与作用域
  2. 先理解函数与对象模型，才能真正理解执行机制
  3. 先理解同步执行和事件循环，再去看 Promise 与 async/await 会更自然
  4. 先分清语言能力和宿主环境边界，再去看真实工程里的 API 和运行差异会更自然
  5. 再补版本演进与兼容性，能把“为什么同一段代码在不同环境下表现不同”这件事看得更完整
  6. 模块化适合放在 JavaScript 之后再单独看，它更像“把前面这些能力组织起来”

5. 学 JavaScript 时最容易混的几个边界 ​

5.1 JavaScript 语言 和 浏览器 API 不是一回事 ​

例如：

  1. let、const、函数、对象、Promise 属于 JavaScript 语言能力
  2. document、window、setTimeout、fetch 更接近运行时提供的能力

这也是为什么 JavaScript 可以跑在浏览器里，也可以跑在 Node.js 里，但能调用的 API 并不完全一样。

5.2 this、作用域、闭包不是同一个东西 ​

这几个词很容易被混在一起。

说得直接一点：

  1. 作用域 说的是变量能在哪里被访问
  2. 闭包 说的是函数如何“记住”定义时的词法环境
  3. this 说的是函数调用时绑定到哪个对象上下文

它们都和“函数执行时会看到什么”有关，但不是同一套规则。

5.3 class 看起来像类，本质上仍然建立在原型机制上 ​

class 主要解决的是可读性和组织方式问题，并不是让 JavaScript 彻底变成另一种基于类的语言。

5.4 async/await 让代码看起来像同步，但本质仍然是异步调度 ​

这也是为什么很多“明明已经 await 了，为什么顺序还是这样”的问题，最后仍然要回到 Promise 和事件循环来解释。

6. 一份知识地图 ​

mermaid
flowchart TD
    A[JavaScript 总体主线] --> B[值与对象]
    A --> C[函数与作用域]
    A --> D[原型与继承]
    A --> E[执行机制]
    A --> F[异步编程]
    A --> G[模块化与运行时]
    E --> F
    C --> E
    B --> D
    D --> G

这张图最重要的意思是：

  1. 值、对象、函数是基础
  2. 执行机制解释“代码为什么按这个顺序运行”
  3. 异步编程建立在执行机制之上
  4. 模块化负责把这些能力组织成更大的工程结构

7. 小结 ​

JavaScript 这部分笔记接下来会逐步往“语言机制 + 执行机制 + 运行时”这三条线去收。

如果只压缩成一句话，可以记住：

JavaScript 不只是语法集合，而是一套语言机制、执行机制和运行时协作方式。

基于 VitePress 构建的个人技术笔记。

Copyright © 2026 WangQuan's Blog