JavaScript 执行上下文：一场代码背后的权谋与博弈

"JavaScript 执行上下文：一场代码背后的权谋与博弈"

假如 JavaScript 是一场王朝剧，那么执行上下文就是深藏幕后、操控全局的枢密院。变量、作用域、this，甚至你写的每一行代码，都不过是它棋盘上的棋子。你看见的是变量的提升、函数的嵌套，而你没看见的是执行上下文的权谋博弈。

今天，我邀请你坐上观众席，不仅要揭开执行上下文的面纱，还要挖掘它如何在这场"宫廷斗争"中一步步操控代码的运行。

第一幕：权力的起源------什么是执行上下文？

当 JavaScript 遇到一段代码，它并不会直接开工，而是像一个睿智的谋士，先为代码创建一个"执行上下文"。
执行上下文是代码执行的环境，它管理着：

变量的生与死（变量对象）。
代码的可见范围（作用域链）。
this 的归属问题 （this 绑定）。

角色分配：三种上下文

全局上下文：整个剧场的舞台，贯穿始终，永不谢幕。
函数上下文：每次函数被调用，都会有一个"分会场"，并临时创建一个新的上下文。
Eval 上下文 ：一名背景模糊的小角色（虽然不建议使用 eval）。

第二幕：一切阴谋始于"变量提升"

看下面这段代码：

ini 复制代码

console.log(prince);
var prince = "Jon Snow";
console.log(prince);

这段代码会输出什么？有人说第一行应该报错，因为 prince 还未被赋值。但事实是：

javascript 复制代码

undefined  
Jon Snow

这就是变量提升（Hoisting）在作祟。在执行上下文的创建阶段，所有的变量都会被"声明"，但还未赋值------就像在王室中，所有继承人都有名字，但他们还没有继承权。

第三幕：作用域链的"王位继承"

让我们再来看一段代码：

ini 复制代码

var king = "Robert";
function throne() {
    console.log(king);
    var king = "Stannis";
    console.log(king);
}
throne();

输出是什么？

这段代码的输出可能会让你迷惑：

javascript 复制代码

undefined  
Stannis

在函数 throne 的上下文中，king 的声明被提升到了最前面，但它的赋值仍然等到执行阶段。就像一个新国王虽然登基了，但他的权力必须等到仪式完成后才会生效。

第四幕：`this` 的归属之争------谁是主角？

在 JavaScript 中，this 的指向问题可以比喻成一场王权争夺战：

ini 复制代码

const kingdom = {
    ruler: "Daenerys",
    claimThrone: function() {
        console.log(this.ruler);
    }
};

const claimThrone = kingdom.claimThrone;
kingdom.claimThrone(); // 输出？
claimThrone(); // 输出？

结果：

javascript 复制代码

Daenerys  
undefined

为什么第二个输出是 undefined？因为 claimThrone 已经脱离了 kingdom 的上下文，变成了一个"流亡贵族"，它的 this 指向全局对象，而非原来的家族。

第五幕：异步的阴谋------幕后操纵的事件循环

执行上下文不仅控制代码的运行，还决定了异步操作的调度优先级。看这段代码：

javascript 复制代码

console.log("A");
setTimeout(() => console.log("B"), 0);
console.log("C");

输出是什么？

css 复制代码

A  
C  
B

事件循环让异步任务（如 setTimeout）被放入任务队列，只有当前上下文完成，异步任务才会进入执行栈。就像一场王室宴会，主角必须等到贵宾退场后才会登场。

第六幕：闭包的密谋

闭包是执行上下文的得意之作。它通过作用域链的延续，让内部函数即使脱离了外部函数的执行上下文，依然能访问外层变量：

javascript 复制代码

function createHeir(name) {
    return function() {
        console.log(`${name} is the heir to the throne.`);
    };
}

const heir = createHeir("Arya");
heir(); // 输出什么？

答案：

vbnet 复制代码

Arya is the heir to the throne.

闭包让外层函数的变量在它"消亡"后依然存在，就像皇室遗嘱，哪怕写遗嘱的人已不在人世，依然能对继承人产生影响。

尾声：权谋之术与智慧的武器

执行上下文是 JavaScript 的权谋家，掌控着代码的命运。如果你能深刻理解它的机制，就能更高效地调试代码、优化性能、写出更加优雅的逻辑。

JavaScript 执行上下文：一场代码背后的权谋与博弈