本文共 1860 字，大约阅读时间需要 6 分钟。

JavaScript 的执行上下文及其对开发者的重要性

在学习 JavaScript 时，很多开发者会感到困惑：执行上下文到底是什么？它的作用又是什么？其实，理解这一概念对掌握 JavaScript 的核心原理至关重要。它不仅帮助我们理解变量提升、作用域和闭包等概念，还将使我们成为更优秀的前端开发者。

以下将从代码执行流程、编译阶段与变量提升的关系、执行阶段的详细过程以及代码变量函数重名问题等方面展开详细分析。

JavaScript 代码的执行流程

让我们从以下代码开始分析)，看看它在运行时会发生什么：

showName()
console.log(myname)
var myname = '极客时间'
function showName() {
    console.log('函数showName被执行');
}

变量和函数的位置不影响它们的存储

你可能注意到，变量和函数在代码中的位置决定了其被执行的顺序，但它们的存储位置不会改变。在编译阶段，JavaScript 引擎（如 V8 引擎）会将这些变量和函数存储在内存中。这一点特别重要，因为它影响了变量的提升和作用域的理解。

编译阶段与变量提升的关系

编译阶段包括词法分析、语法解析、代码优化等步骤。在变量声明部分，JavaScript 引擎会创建一个变量环境对象（Variable Environment），用来存储所有变量和函数。这里的变量默认值是 undefined。在代码执行阶段，JavaScript 引擎使用这些变量环境对象来查找变量和函数。

在以下代码中：

var myname = undefined
function showName() {
    console.log('函数showName被执行');
}

myname 和 showName 都被存储在变量环境对象中，之后即使代码的执行顺序被改变，它们的存储位置不会改变。

执行阶段的详细过程

当代码进入执行阶段时，JavaScript 引擎会依次执行每一行代码。在以下代码中：

showName()
console.log(myname)
myname = '极客时间'

执行过程如下：

此外，函数的声明总是在编译阶段进行处理，并存储在函数表中，而不会影响变量提升的过程。

代码中出现相同的变量或函数怎么办？

假设我们有以下代码：

function showName() {
    console.log('极客邦');
}
showName();
function showName() {
    console.log('极客时间');
}
showName();

在编译阶段，两个 showName 函数都会被存储在变量环境对象中，但最后一次定义的函数会覆盖前一次。因此，无论多少次调用 showName()，最终都会输出“极客时间”。

你可能想知道，这种覆盖现象对代码有什么影响。实际上，当两个相同名称的函数被定义时，最后一个定 وق函数会生效。这是因为变量环境对象在 JavaScript 中是按照引用存储的，而函数引用会被最后赋值所覆盖。

总结

在 JavaScript 中，执行上下文和调用栈是代码执行的核心机制。以下是总结：

这一理解至关重要，因为它帮助开发者深入理解 JavaScript 的执行机制，进而更好地利用函数、闭包和异步操作等特性进行开发。