JavaScript执行上下文与作用域解析

"01JavaScript作用域.md" 在JavaScript中，执行上下文是理解作用域和变量生命周期的关键概念。执行上下文定义了代码执行时的环境，它包括变量、函数和对象的可访问性。我们可以将执行上下文分为三类：全局上下文、局部（函数）上下文以及异步上下文（如事件循环）。在这里，我们主要讨论全局和局部上下文。 ### 1. 全局上下文 全局上下文是在JavaScript代码开始执行时创建的，它是整个脚本的根环境。在这个环境中定义的变量和函数在整个脚本生命周期内都是可访问的，直到脚本执行完毕或浏览器关闭时，全局上下文才会被销毁。例如： ```js var globalVar = 10; ``` 在上面的例子中，`globalVar`是全局变量，可以在任何地方被引用。 ### 2. 局部（函数）上下文 当函数被调用时，一个新的执行上下文会被创建，这就是局部上下文。这个上下文只存在于函数内部，并且在函数执行完毕后会被销毁。函数内的变量只在函数内部可访问，不会污染全局空间： ```js function localContext() { var localVar = 20; console.log(localVar); // 20 } localContext(); // 函数调用，局部上下文被创建 console.log(localVar); // ReferenceError: localVar is not defined ``` 在这个例子中，`localVar`在`localContext`函数内部是可见的，但在函数外部则无法访问。 ### 上下文的创建与销毁 - **创建阶段**：全局上下文在脚本开始执行时创建，局部上下文在每次函数调用时创建。 - **激活阶段**：在创建之后，执行上下文会进入激活阶段，此时变量和函数声明会被处理（变量赋值会在稍后进行）。 - **执行阶段**：所有变量和函数准备就绪后，代码开始执行。 - **销毁阶段**：函数执行完毕后，局部上下文销毁，其内部变量和函数也随之消失；全局上下文仅在浏览器关闭时销毁。 ### 案例分析 #### 案例1 ```js // 全局变量 var a = 10; function fn1() { var b = 20; console.log(b); } function fn2() { var c = 30; console.log(c); } console.log(1); fn1(); console.log(2); fn1(); console.log('global', a); fn2(); ``` 在这个案例中，我们看到全局变量`a`在全局上下文中被定义，而`fn1`和`fn2`内部的`b`和`c`则是局部变量。每次调用`fn1`或`fn2`都会创建一个新的局部上下文，函数执行结束后，这些局部变量会随之销毁。 #### 案例2 ```js function foo() { console.log('foo'); // 1 function bar() { console.log('bar'); // 3 } console.log(1); // 2 bar(); console.log(2); // 4 } foo(); ``` 在第二个案例中，`foo`函数内部定义了一个嵌套函数`bar`。`bar`函数的局部上下文只在其被调用时存在，因此在`foo`函数执行期间，`bar`可以访问到`foo`的局部变量。当`foo`执行完毕后，`bar`的局部上下文也会随之销毁。 理解执行上下文和作用域对于编写高效、无错误的JavaScript代码至关重要。它们帮助我们管理变量的生命周期，防止意外的全局变量污染，以及确保代码在预期的范围内正确运行。在实际编程中，还要注意作用域链、闭包等高级概念，这些都与执行上下文密切相关。