执行上下文是JavaScript在运行时为每一段代码执行而搭建的“临时指挥部”，本次事件的所有数据（变量、参数、作用域）和元信息（this指向、函数身份、词法环境）都被装在里面，离开它，代码寸步难行。 很多前端开发者在调试报错时盯着堆栈却无从下手，根本原因就是把“代码本身”和“执行这台代码的现场信息”混为一谈，这篇内容从原理到调试实操，帮你把这层纸捅破。
js执行上下文是什么？核心三要素拆解
把执行上下文想象成一次函数调用的“任务工单”，工单上写着三块内容：干了什么（数据）、从哪来（词法环境）、谁负责（this），JavaScript引擎每遇到一次函数调用、一段块级代码或一个全局脚本，都会先派发一张工单，然后照单执行。
变量环境：存放数据的储物柜
变量环境负责登记变量声明、函数声明和函数参数，这里有个容易忽略的点：var声明的变量和let/const声明的变量，在储柜里的“待遇”不一样。var会被提升到顶部并初始化为undefined，let和const则被要求在声明之后才能取用，否则直接抛引用错误，这也是大家常说暂时性死区的来源。
- 函数参数：形参在进入执行上下文时先被赋值，哪怕实参是
undefined - 函数声明：整个函数体被提前放入储柜，位置靠前于变量
var变量：先占位为undefined，执行到赋值语句时才真正写入值
词法环境：代码结构的“地图”
词法环境记录的是代码写在哪儿，而不是代码干了什么，它由两个部分组成：环境记录（存放标识符）和外部环境引用（指向外层作用域），通过这个外部引用，引擎才能顺着作用域链向上查找变量，你写一个嵌套函数，内层函数能访问外层变量，靠的就是这张地图上的outer指针。
this绑定：标注调用者的身份牌
this不是变量,它是执行上下文里的元信息，同一段函数，调用方式不同，this就不同，比如对象方法调用指向对象，普通函数调用在严格模式下是
undefined，非严格模式下回退到全局对象，元信息不参与计算，但它决定了计算时的“立场”。
javascript执行上下文和词法环境区别在哪
很多人把这两个概念混成一体,实际上它们的关系是整体和局部，执行上下文是运行时的完整现场，词法环境只是现场里的一块地图模块，拿去面试时说“执行上下文就是词法环境”，基本等于白送一道送命题。
| 维度 | 执行上下文 | 词法环境 |
|---|---|---|
| 存在时机 | 函数调用时创建，执行完销毁 | 随上下文创建，也被闭包长期引用 |
| 生命周期 | 与调用栈绑定，压栈出栈 | 可由闭包延长存活 |
| 调试表现 | 在浏览器Call Stack面板可见 | 在Scope面板里逐层展开 |
举个例子,function outer(){ let a = 1; return function inner(){ console.log(a) } }，调用outer()生成一个执行上下文，它内部包含一个词法环境，记录a=1和outer自身的标识符。执行上下文随调用结束出栈，但词法环境被inner闭包带着不放，这就是两者寿命差异最直观的体现。
执行上下文创建阶段做了什么：两步走流程
每次创建执行上下文,JavaScript引擎都按固定流程操作，顺序不能乱，了解这个过程，你在调试时就能预判变量在哪个节点可用。
第一步：创建词法环境，完成变量提升
引擎扫一遍当前代码块,把所有声明摘出来放进环境记录，遇到var就初始化为undefined，遇到函数声明就存好完整函数体，遇到let/const则放进单独区域并标记为“不可访问”，这一步做完，代码才进入逐行执行阶段。
第二步：绑定this，确定调用方式
this的绑定规则按优先级排列：new调用绑定新对象，call/apply/bind显式绑定指定对象，方法调用绑定归属对象，普通函数走默认绑定，箭头函数比较特殊，它跳过这个步骤，直接沿用外层执行上下文的this，所以箭头函数自身没有独立的this元信息。
这里有个实操规律可以记：进入函数体那一刻，this就已经固定下来，跟函数内部怎么return、是否异步无关，你只需要排查“它是在哪个对象上被调用的”这一个问题，就能找出大部分this指向错误。
前端面试执行上下文怎么答：从闭包到事件循环
面试官问执行上下文,通常不是考背诵，而是考你能不能用它解释现象，两个高频场景能覆盖九成提问。
闭包场景：执行上下文“销毁但存根”
看这段代码：
function counter() {
let count = 0;
return function () {
count++;
console.log(count);
};
}
const add = counter();
add(); // 输出1
add(); // 输出2
counter()调用结束后，它的执行上下文出栈销毁，但内部创建的词法环境被返回的函数引用，没有随之清理，每次调用add，新生成一个执行上下文，它的词法环境外部引用仍然指向那个存活的旧词法环境，因此count变量被连续累加，跟面试官讲清楚上下文销毁不等于变量销毁这一句，就证明你真正理解了闭包。
事件循环场景：调用栈与微任务配合
setTimeout回调不是立刻进入执行上下文，而是先把回调函数塞进宏任务队列，等到调用栈清空后才会创建上下文执行。Promise.then回调则进入微任务队列，优先级高于宏任务，看这段代码:
setTimeout(() => console.log('宏任务'), 0);
Promise.resolve().then(() => console.log('微任务'));
console.log('同步代码');
输出顺序是同步代码、微任务、宏任务，因为同步代码最先执行完，随后引擎检查微任务队列，最后才轮到下一轮宏任务，每个任务执行前都会创建对应的执行上下文，任务结束上下文销毁，如此往复。
用Chrome开发者工具查看执行上下文的元信息
理论说再多,不如在调试面板里亲眼看一次，以Chrome DevTools为例，按以下步骤操作：
- 在代码里打断点,触发目标函数调用
- 打开Sources面板，右侧自动出现Call Stack栈列表
-
点击栈里任意一层,下方Scope面板展示该执行上下文的变量环境与词法环境
- 用鼠标悬停代码中的
this关键字，查看绑定的对象身份
执行上下文里包含本次事件的数据与元信息,调试时你看的就是这两块，Scope面板里标注的Local代表当前函数作用域内的变量，Closure代表被引用的外部词法环境，Global是全局环境记录，排查内存泄漏时，重点观察Closure项是否长期存在且体积膨胀，排查this丢失时，直接在Call Stack里切换执行层，对比不同层级的this指向。
执行上下文常见疑问与解答
调用栈最多能放多少个执行上下文？
这个数字由浏览器和系统栈空间决定,没有统一上限，栈溢出时浏览器抛出RangeError: Maximum call stack size exceeded，常见于无限递归或超深循环，业内的经验法则是，普通递归超过一万层就要警惕栈溢出了，优化时优先考虑改用迭代或尾递归。
函数声明和变量声明的优先级怎么记？
同作用域内,函数声明优先于var变量声明，在创建阶段，函数体先被写入环境记录，随后var把同名变量初始化为undefined，执行阶段赋值语句才会覆盖函数，因此console.log(foo)在前，var foo = 1在后，function foo(){}在最后，打印结果仍是函数体，这条规则在任何浏览器里都稳定。
箭头函数为什么在React事件绑定里不需要bind？
箭头函数创建时不生成自己的this元信息,它直接使用定义位置外层上下文里的this，在类组件里写onClick={() => { this.setState(...) }}，箭头函数在组件构造函数作用域内定义，所以指向组件实例，而普通函数必须手动调用bind(this)，否则执行时this随调用环境漂移，理解这个区别，你就知道为什么现代组件库越来越依赖函数式写法了。
执行上下文是JavaScript运行机制的骨架,把数据与元信息理顺，日常开发遇到的作用域泄漏、this指向报错、闭包内存残留问题都能从根上找到突破口，工单”这个模型：每次函数调用都是一次全新开工，数据决定能干嘛，元信息决定按谁的规则干。
首发原创文章，作者：王坚，如若转载，请注明出处：https://idctop.com/article/638012.html
