Skip to Content
Nextra 4.0 is released 🎉
Plan第 1 周 · JS 执行机制与运行时内功

🎯 本周总目标

你要做到：可以在脑子里“逐行跑 JS 代码”，不靠猜，不靠试。

✅ 本周达标标准

  • 能区分：执行上下文 vs 作用域
  • 能完整推导：创建阶段 → 执行阶段
  • 能解释：变量提升、TDZ、闭包不销毁原因
  • 能画出：函数调用栈
  • 能手写：最简执行上下文模拟器

一、执行上下文（Execution Context）

1️⃣ 执行上下文的真实结构

ExecutionContext = {
  VariableEnvironment, // var + function
  LexicalEnvironment,  // let + const + 块级作用域
  ThisBinding          // this 绑定
}

2️⃣ 执行的两个阶段

阶段发生的事情
创建阶段变量提升、函数声明提升、this 绑定
执行阶段按代码顺序逐行执行

二、作用域与作用域链

✅ 核心结论

作用域在“定义时”就确定，而不是调用时。

let a = 10;
function fn() {
  console.log(a);
}
function bar() {
  let a = 20;
  fn();
}
bar(); // 10

原因：fn 的作用域在定义时已绑定到全局。

三、变量提升的本质

✅ 本质说明

变量提升不是“代码上移”，而是在创建阶段创建绑定。

console.log(a); // undefined
var a = 1;
 
console.log(b); // ReferenceError
let b = 2;
 
foo(); // 正常执行
function foo() {}

对比结论：

声明方式创建阶段状态访问结果
var初始化为 undefinedundefined
let / const存在但未初始化（TDZ）报错
function完整函数体正常调用

四、闭包（Closure）

✅ 定义

闭包 = 函数 + 它“定义时”的作用域

function create() {
  let a = 1;
  return function () {
    a++;
    return a;
  }
}
const fn = create();
fn(); // 2
fn(); // 3

✅ 关键结论

  • a 不会被销毁
  • 因为它被返回函数引用
  • 垃圾回收无法释放被引用的词法环境

五、调用栈（Call Stack）

function a() { b(); }
function b() { c(); }
function c() { console.log('hi'); }
a();

执行栈模型：

Global
  → a()
    → b()
      → c()

所有同步 JS 执行顺序，都依赖这个调用栈模型。

六、综合执行推导题

var a = 1;
 
function foo() {
  console.log(a);
  var a = 2;
  function bar() {
    console.log(a);
  }
  bar();
}
 
foo();

✅ 正确输出：

undefined
2

推导关键点：

  • foo 内部 var a 被提升
  • 第一次访问 a 是局部 undefined
  • 赋值后 a = 2
  • bar 访问的是 foo 作用域中的 a

七、工程级实战：执行上下文模拟器

class ExecutionContext {
  constructor(type = 'function') {
    this.type = type;
    this.variableEnv = {};
    this.lexicalEnv = {};
    this.thisBinding = null;
  }
}
 
class CallStack {
  constructor() {
    this.stack = [];
  }
  push(ctx) {
    this.stack.push(ctx);
  }
  pop() {
    return this.stack.pop();
  }
  current() {
    return this.stack[this.stack.length - 1];
  }
}

✅ 目标不是“完整 JS 引擎”，而是：

你亲手造出 JS 运行系统的“抽象骨架”。

✅ 本周 checkList

  • 能说清楚执行上下文三大组成
  • 能独立推导变量提升全过程
  • 能解释 TDZ 的本质
  • 能解释闭包为何不被 GC 回收
  • 能画出任意函数调用栈
  • 已搭建执行上下文模拟器 Demo

🚀 下周预告：第 2 周 · Event Loop 与任务调度

  • 宏任务 vs 微任务
  • Promise / setTimeout / requestAnimationFrame
  • 浏览器任务调度模型
  • 手写 EventLoop 执行引擎

进入这一周，你将真正理解“异步的本质”。

以下是针对您的查询的系统性学习指导。您提到的是 knowledge-base/app/plan/total/page.mdx 文件中第 30-82 行的内容，这部分描述了“阶段 1（第 1–2 月）——浏览器 + JS 运行时内功”的学习计划。我将帮助您系统性地实现这一阶段的目标，包括逐周分解、学习内容建议、资源推荐和实战步骤。作为一个AI编码助手，我会基于代码库中的现有内容（例如您的知识库项目）来提供指导，确保学习过程可操作且与您的 Next.js/Nextra 项目整合（例如，您可以在项目中添加笔记或代码示例）。 总体学习框架 阶段目标：彻底掌握浏览器和 JavaScript 运行时的核心机制，包括执行流程、事件循环、渲染管道和内存管理。这将为您后续的框架学习（如 React、Next.js）打下坚实基础。 时长：8 周（第 1-8 周），每周聚焦一个主题，结合理论学习和实战。 学习原则： 系统性：每天分配时间（建议 2-4 小时）：30% 理论阅读、40% 代码实践、30% 总结笔记。 工具与资源：使用 Chrome DevTools 进行调试；在您的 Nextra 项目中创建子页面（如 app/plan/phase1/week1/page.mdx）来记录笔记和代码片段。 进度跟踪：每周结束时，输出一份总结（例如知识图或 Demo），并自测（如解决 LeetCode 相关题目）。 潜在挑战：如果遇到难点（如闭包或 Event Loop），先手写模拟代码，再查阅官方文档。 整合项目：在您的知识库中扩展 app/languages/javaScript/page.mdx 或创建新页面来存储学习成果。 如果您需要我帮助修改项目文件（如添加新 MDX 页面），请随时告知。我会优先使用工具来读取或编辑文件，而非直接输出代码。 逐周学习计划 我将每个周的目标、学习内容、推荐资源和实战步骤详细展开。资源优先选择免费/官方的，并链接到可靠来源（假设您有网络访问）。 第 1 周：JS 执行机制 目标：彻底理解 JS 是“如何被执行的”，掌握代码从解析到运行的内部流程。 学习内容： 执行上下文（Execution Context）：全局、函数、Eval 上下文。 作用域链（Scope Chain）：词法作用域 vs. 动态作用域。 闭包（Closure）：函数嵌套和变量访问。 变量提升（Hoisting）：var/let/const 的差异。 推荐资源： MDN 文档：执行上下文、闭包。 书籍/文章：《你不知道的 JavaScript》（上卷）第 1-2 章。 视频：Bilibili 或 YouTube 搜索“JS 执行上下文详解”（如 Philip Roberts 的 TED 演讲）。 实战步骤： 手写作用域链模拟：创建一个函数嵌套示例，模拟变量查找过程（用对象表示作用域）。 画 10 张执行栈流程图：针对不同代码片段（如函数调用、闭包），用工具如 Draw.io 绘制栈变化。 项目整合：在 app/languages/javaScript/page.mdx 添加一节“执行机制”笔记，包含代码示例。 第 2 周：Event Loop 目标：彻底掌握微任务/宏任务，理解 JS 的异步执行模型。 学习内容： Promise.then：异步回调的微任务队列。 MutationObserver：DOM 变化的微任务触发。 requestAnimationFrame：宏任务在渲染前的应用。 推荐资源： MDN：使用微任务。 文章：Jake Archibald 的“In The Loop” (搜索“What the heck is the event loop anyway?”)。 工具：Loupe (http://latentflip.com/loupe/ ) – 一个在线 Event Loop 模拟器。 实战步骤： 手写 Event Loop 模拟器：用 Node.js 或浏览器 console 编写代码，打印 Promise、setTimeout 和 async/await 的执行顺序。 项目整合：创建 app/plan/phase1/week2/page.mdx，记录模拟代码和输出结果。 第 3 周：浏览器渲染全流程 目标：理解从 HTML/CSS 到屏幕显示的完整管道。 学习内容： HTML -> DOM：解析树构建。 CSS -> CSSOM：样式计算。 RenderTree 构建：DOM + CSSOM 合并。 Layout/Paint/Composite：布局、绘制和合成。 推荐资源： Google Developers：渲染性能(https://web.dev/articles/critical-rendering-path?hl=zh-cn)。  视频：Chrome Dev Summit 的渲染流程讲解。 实战步骤： 用 DevTools 逐帧分析渲染流水线：打开 Performance 面板，录制页面加载，分析每个阶段的时间消耗。 项目整合：在 app/frameworks/nextjs/page.mdx 添加渲染相关笔记（因为 Next.js 涉及 SSR/CSR）。 第 4 周：重绘、回流与图层 目标：优化渲染性能，理解浏览器如何处理变化。 学习内容： GPU 合成层：硬件加速。 transform/opacity：不触发回流的属性。 will-change：预优化提示。 推荐资源： CSS-Tricks：重绘与回流。 工具：Chrome Layers 面板。 实战步骤： 做 3 份性能对比 Demo：创建简单动画（一个用 transform，一个用 left/top），用 DevTools 比较帧率。 项目整合：扩展 app/components/CodeBlock.jsx 添加渲染 Demo 代码。 第 5 周：V8 与垃圾回收 目标：掌握 JS 引擎的内存管理，避免泄漏。 学习内容： 新生代/老生代：Scavenger 和 Mark-Sweep。 标记清除：垃圾回收算法。 内存泄漏定位：常见场景如未清理事件监听。 推荐资源： V8 官方博客：内存管理。 工具：Chrome Memory 面板教程。 实战步骤： Chrome Memory 面板实战：创建循环引用代码，录制 Heap Snapshot，定位泄漏。 项目整合：在 app/languages/javaScript/page.mdx 添加“内存管理”一节。 第 6–8 周：综合实战 目标：整合前几周知识，通过手写代码深化理解。 学习内容： 手写 Promise、防抖/节流、深拷贝。 复习所有主题，连接点（如 Event Loop 如何影响渲染）。 推荐资源： GitHub 仓库：搜索“手写 Promise”或“JS 手写系列”。 LeetCode：题目如“实现 Promise.all”。 实战步骤： 实现上述函数：从零编写，测试边缘案例。 输出成果：绘制“JS 运行机制全景知识图”（用 MindMeister 或 XMind），覆盖所有周内容。 项目整合：创建 app/plan/phase1/summary/page.mdx，嵌入知识图和代码。 额外建议 资源扩展：如果您的项目有 app/tools/page.mdx，可以添加学习工具如 DevTools 的使用指南。 潜在问题解决：如果卡在某个点（如理解闭包），我可以帮您生成模拟代码（用 Markdown 代码块展示新代码）。例如，需要我提供 Promise 的手写示例吗？ 进度监控：每周结束时，自问：“我能解释这个机制给别人听吗？”如果需要调整计划，请告诉我。 下一步：开始第 1 周？或需要我帮您在项目中创建相关 MDX 文件（如用 edit_file 工具）？ 如果这个计划需要调整，或您想深入某个周的具体代码示例，请提供更多细节！我会继续协助。

最近更新：12/9/2025, 2:17:57 AM
阶段 1：浏览器 + JS 运行时内功（第 1–2 月）阶段 2：框架级硬核实战（第 3–4 月）