画内存图解是理解执行上下文栈最直观的方式，需准确呈现执行上下文结构、LIFO栈序及VO与作用域链变化，分步标注提升、销毁和闭包引用，并用堆图补充对象引用关系。
画内存图解是理解执行上下文栈最直观的方式——它把抽象的“栈压入/弹出”变成看得见的盒子堆叠与拆解。关键不在于画得多精美，而在于准确反映三个核心要素：执行上下文的结构、栈的LIFO顺序、以及每个上下文中变量对象（VO）和作用域链的变化。
用不同颜色区分三类执行上下文
全局上下文用浅灰色长方框，函数上下文用彩色矩形（比如蓝色代表foo，绿色代表bar），eval上下文可标为灰色斜线区（并注明“极少使用”）。每个框顶部写明类型（如“全局EC”或“foo() EC”），内部按区域划分：
-
VO区：列出该上下文中声明的变量（初始为
undefined）、函数（直接写出函数体缩略或标“fn ref”）、参数（仅函数上下文有） - this指向：单独一行，如“this → window”或“this → obj”
- 作用域链：用箭头从当前VO指向父级VO，最终连到全局VO，体现“向上查找”路径
按时间轴分步绘制调用过程
不要一次性画完，而是配合代码执行节奏，逐帧更新图示。例如分析以下代码：
let a = 10;
function foo(x) {
let b = 20;
return bar(x + b);
}
function bar(y) {
let c = 30;
return y + c;
}
foo(5);
分五步画：
立即学习“Java免费学习笔记（深入）”；
- 第1步：只画全局EC，VO含
a: undefined、foo: fn ref、bar: fn ref，this → window - 第2步：
foo(5)调用 → 新增蓝色foo() EC压在全局框上方，VO含arguments: [5]、x: 5、b: undefined，作用域链指向全局VO - 第3步：进入
bar(x+b)→ 新增绿色bar() EC压在最顶，VO含arguments: [25]、y: 25、c: undefined，作用域链指向fooVO → 全局VO - 第4步：
bar返回 → 顶上绿色框消失，控制权回到foo框，此时b已赋值为20 - 第5步：
foo返回 → 蓝色框消失，只剩全局EC，a值更新为10
重点标注“提升”和“销毁”的视觉提示
变量和函数声明提升用虚线箭头从代码行指向VO中对应项，并标注“hoisted”。函数执行完毕时，在弹出的上下文框边缘加撕裂效果或淡出渐变，并旁注“销毁（闭包除外）”。若遇到闭包（如内部函数被返回），在作用域链箭头旁加星号，注明“保留对外部VO引用”，避免误以为所有函数退出后变量立即释放。
用堆内存图补充说明引用关系
当代码涉及对象、数组或函数赋值时，在图右侧另设“堆内存区”。用圆角矩形表示堆中对象，标注地址（如0x001），再用带箭头的实线连接栈中VO里的变量名与堆中对应对象。例如let obj = {name: 'Lucy'}，VO中obj指向堆中0x001，而0x001内写name: 'Lucy'。这样能清晰解释为什么函数能访问外部变量——不是复制值，而是通过作用域链找到VO中的引用，再经指针取堆中真实数据。
