解密 JavaScript 执行上下文与作用域提升的奥秘

前端

2023-11-22 23:10:39

执行上下文与作用域提升

在 JavaScript 代码解析过程中，执行上下文和作用域提升是两个非常重要的概念。要想弄清楚它们，首先就要了解 JavaScript 的运行机制。

JavaScript 的运行机制

JavaScript 是一种解释型语言，这意味着它不是一次性编译成机器码，而是逐行解释执行的。解释器的执行过程主要包括以下几个步骤：

解析和编译： 解释器首先将 JavaScript 代码解析成抽象语法树 (AST)，然后将其编译成字节码。字节码是解释器可以理解的中间代码，它比 AST 更加紧凑，执行效率也更高。
执行字节码： 解释器将字节码加载到内存中，并逐行执行。在执行过程中，解释器会根据字节码的指令，创建执行上下文并执行代码。
垃圾回收： 当解释器检测到不再使用的变量或对象时，它会将它们从内存中删除，以释放内存空间。

执行上下文

执行上下文是 JavaScript 代码执行的环境，它包含了当前正在执行的代码、变量和函数。每个函数都有自己的执行上下文，当函数被调用时，它的执行上下文就会被创建。函数执行完成后，它的执行上下文就会被销毁。

作用域提升

作用域提升是 JavaScript 中的一个特殊现象，它指的是变量和函数在代码执行前就被提升到了作用域的顶部。这意味着，即使变量和函数在代码中声明的位置很靠后，它们也可以在代码的任何位置被访问。

变量提升

变量提升只对 var 声明的变量有效，let 和 const 声明的变量不会被提升。当解释器解析代码时，它会将所有 var 声明的变量提升到作用域的顶部，并初始化它们的值为 undefined。

函数提升

函数提升对所有函数声明都有效，无论它们是函数表达式还是函数声明。当解释器解析代码时，它会将所有函数声明提升到作用域的顶部。这意味着，即使函数声明在代码中声明的位置很靠后，它也可以在代码的任何位置被调用。

词法作用域与动态作用域

JavaScript 采用词法作用域，这意味着变量的作用域是由它所在代码块的结构决定的。例如，在一个函数中声明的变量，它的作用域就仅限于该函数内部。

代码示例

var a = 1;

function foo() {
  var b = 2;

  console.log(a); // 1
  console.log(b); // 2
}

foo();

console.log(a); // 1
console.log(b); // ReferenceError: b is not defined