JavaScript的学习顺序

JavaScript 的核心概念和快速学习的顺序介绍。

#status / growing #type / concept #resource / javascript #resource / ecmascript

[!info] related notes

JavaScript核心概念和学习顺序

JavaScript 里比较核心的一组概念

如果把 JavaScript 当成一门语言来学，常见的重要概念大致可以分成这几层：

1. 基础执行模型

这是最底层的“语言怎么跑起来”。

  • 值与变量
    • 基本类型、引用类型
    • let / const / var
    • 类型转换、相等性判断
  • 作用域
    • 全局作用域
    • 函数作用域
    • 块级作用域
  • 执行上下文
    • 代码执行时会创建执行环境
    • 包括变量环境、作用域链、this 等
  • 作用域链
    • 当前作用域找不到变量时，向外层一层层找

这部分是理解后面很多概念的地基。

2. 函数相关机制

JavaScript 很多能力都建立在函数之上。

  • 函数是一等公民
    • 函数可以赋值、传参、返回
  • 闭包
    • 函数可以“记住”定义时所在的词法环境
  • 高阶函数
    • 函数接收函数，或返回函数
  • 回调函数
    • 把函数交给别人，在合适的时候调用

闭包、回调、异步编程，本质上都和“函数 + 作用域”强相关。

3. 对象系统

这是 JavaScript 区别于很多经典面向对象语言的地方。

  • 对象
    • 属性、方法、动态增删
  • 原型
    • 对象可以从另一个对象继承属性
  • 原型链
    • 查找属性时，会顺着原型一层层找上去
  • 构造函数 / new
  • class
    • 本质上是对原型机制的语法糖

很多人学 class 时容易误以为 JS 和 Java/C++ 一样，其实底层核心还是原型。

4. this 绑定机制

这是 JS 最容易混淆、但非常重要的一块。

  • 普通函数调用时 this 指向谁
  • 方法调用时 this
  • call / apply / bind
  • 箭头函数没有自己的 this

this 和闭包、原型、对象方法经常一起出现，所以单独拎出来很重要。

5. 异步编程模型

前端和 Node.js 都离不开这一块。

  • 同步 / 异步
  • 回调
  • Promise
  • async / await
  • 事件循环（Event Loop）
  • 宏任务 / 微任务

这一层决定了你怎么理解：
“为什么定时器不是立刻执行？”
“为什么 Promise.then 比 setTimeout 先执行？”
“为什么 JS 单线程还能处理很多异步任务？”

6. 模块化

代码一大，就必须理解组织方式。

  • export / import
  • CommonJS 与 ES Module
  • 作用域隔离
  • 依赖管理

7. 面向实际开发的运行时概念

这部分是“JavaScript 语言”之外，和环境有关。

浏览器里常见：

  • DOM
  • BOM
  • 事件机制
  • 定时器
  • Ajax / Fetch

Node.js 里常见：

  • 文件系统
  • 进程
  • 模块系统
  • Node 的事件循环特点

这些概念之间有递进关系吗

有，而且很明显，但不是一条直线，而是“地基 -> 两条主线 -> 汇合”。

第一层地基：变量、作用域、执行上下文

这是最基础的。

因为：

  • 闭包 离不开作用域
  • this 要放到执行上下文里理解
  • 事件循环 要先知道“同步代码先执行”
  • 原型链 要先理解对象和属性访问

所以第一层是所有东西的前提。

第二层主线 A：函数机制

从这里长出：

  • 作用域链
  • 闭包
  • 回调函数
  • 高阶函数
  • this

特别是：

  • 闭包 是理解异步和回调的重要桥梁
  • 很多事件监听、定时器、Promise 链式调用，背后都在用函数和闭包

第二层主线 B：对象机制

从这里长出：

  • 对象
  • 原型
  • 原型链
  • 构造函数
  • class

这条线是 JS 的“面向对象核心”。

第三层汇合：异步模型

这时你已经懂了：

  • 函数能被传来传去
  • 闭包能保留上下文
  • 同步代码先执行
  • 异步任务晚点执行

这时候再学：

  • 回调
  • Promise
  • async/await
  • 事件循环

就会顺很多。

因为异步编程本质上就是：
函数在未来某个时机被调用，而它还要能拿到之前的上下文。

这句话本身就把“回调 + 闭包 + 事件循环”连起来了。

有没有学习顺序的说法

有，推荐按“依赖关系”学，而不是按面试题热度学。

一个比较顺的顺序是：

第 1 阶段：先打地基

  1. 基本类型、引用类型
  2. 变量声明：var、let、const
  3. 作用域
  4. 执行上下文的基本概念
  5. 函数基础

第 2 阶段：学函数机制

  1. 作用域链
  2. 闭包
  3. this
  4. 高阶函数、回调函数

这一步之后，你对 JavaScript 的“灵魂部分”就开始有感觉了。

第 3 阶段：学对象机制

  1. 对象与属性访问
  2. 原型
  3. 原型链
  4. 构造函数
  5. new
  6. class 和继承

注意：
很多教程先讲 class，但从理解上，先懂原型，再看 class 更扎实。

第 4 阶段：学异步

  1. 同步 / 异步
  2. 定时器、事件监听
  3. 事件循环
  4. Promise
  5. async / await

注意这里一个常见误区：
很多人直接背 Promise 和 async/await，但如果没先搞清同步执行和事件循环，最后只会背语法，不会判断执行顺序。

第 5 阶段：学工程化与运行时

  1. 模块化
  2. DOM / 事件机制
  3. Fetch / 网络请求
  4. Node.js 基础

如果只问“最重要的几个概念”，我会优先列这 8 个

如果你现在想抓主干，而不是铺满全图，我会先抓这几个：

  1. 作用域
  2. 作用域链
  3. 闭包
  4. this
  5. 原型 / 原型链
  6. 执行上下文
  7. Promise / async-await
  8. 事件循环

这 8 个基本就是 JS 面试和真正理解语言机制的核心骨架。

它们之间可以怎么一句话串起来

可以这样记：

  • 作用域 决定变量在哪能访问
  • 作用域链 决定访问不到时往哪找
  • 闭包 让函数保留定义时的作用域环境
  • 执行上下文 决定代码运行时的整体环境
  • this 决定函数运行时“当前对象”是谁
  • 原型链 决定对象属性访问时往哪继承
  • 事件循环 决定异步任务什么时候执行

你会发现：

  • 闭包 是“函数与作用域”的结果
  • 原型链 是“对象与继承”的结果
  • 事件循环 是“执行模型与异步调度”的结果

所以它们不是并列零散知识点，而是同一套语言机制的不同侧面。

一个简洁的学习建议

别一上来就硬啃“闭包、原型链、事件循环”这三个大词。
更好的路径是：

变量/作用域 → 函数/闭包/this → 对象/原型链 → 异步/事件循环

这样学下来，每一步都能接住下一步，不容易碎。

创建于 2026/3/14 更新于 2026/5/27