从V8引擎的角度详解JavaScript变量提升

站长

2023年06月09日 20:19 · 阅读数 37

在 JavaScript 中，变量提升是一种重要的概念，它可以影响代码的执行顺序和作用域。了解变量提升的机制对于理解 JavaScript 代码的执行过程至关重要。在本文中，我们将从 V8 引擎的角度详细解释 JavaScript 中的变量提升。

V8引擎

V8引擎是一种高性能的JavaScript引擎，由Google开发并用于Chrome浏览器和Node.js等环境中。V8引擎负责将JavaScript代码解析、编译和执行。

解析和编译

在执行 JavaScript 代码之前，V8 引擎首先对代码进行解析。解析是将源代码转换为抽象语法树（AST）的过程。AST 是一种树状数据结构，用于表示代码的结构和语义。

在解析过程中，V8 引擎会识别变量和函数的声明，并在内部数据结构中记录它们的存在。这些声明包括变量和函数的名称，并在需要时为它们分配内存空间。接下来，V8引擎会将抽象语法树转换为可执行的机器码。这个过程被称为编译。编译阶段会生成字节码或机器码，以便在执行阶段进行解释或执行。

了解了 V8 引擎的工作步骤之后，我们来看下变量提升的过程。

变量提升的过程

在 JavaScript 代码的编译阶段，V8引擎会处理变量和函数的声明，将它们提升到作用域的顶部。这个过程被称为变量提升。

有关作用域可以看我的另一篇文章《JavaScript作用域》

在变量提升阶段，V8引擎会创建执行上下文（Execution Context），并在该上下文中维护一个变量环境（Variable Environment）。变量环境中保存了变量和函数的声明，包括它们的名称和初始值。

变量提升的本质是将变量和函数的声明在编译阶段提升到作用域的顶部，使它们在执行阶段之前就可以被访问。这意味着在代码执行时，变量和函数的声明已经存在于作用域中，可以被正确地使用。

变量提升只会提升变量声明，不会提升其值，只有在运行到对应的赋值语句时才初始化变量的值。在此之前，变量的值始终是 undefined，如果未指定初始值，则变量的值被初始化为 undefined。

函数声明在提升时，整个函数体都会被提升，即提升声明+初始化，可以在函数声明之前去调用它。函数会比变量优先提升到更靠前的位置。

函数表达式，由于是通过 var let const语句声明的函数表达式，提升的特性与 var let const声明的变量相同。不会被整体提升，只会提升声明。

正常情况下我们写代码都是先声明，后调用。运行以下示例。

/**
以下是模拟提升至作用域顶部的样子（函数在最顶部）：

function fn() {
  console.log('执行fn')
} // 声明函数 fn

var a; // 声明变量 a

*/


var a = 'hello';
console.log(a); // output: hello

function fn() {
  console.log('执行fn')
}
fn(); // output: 执行fn

在声明语句之前调用

/**
以下是模拟提升至作用域顶部的样子（函数在最顶部）：

function fn() {
  console.log('执行fn')
} // 声明函数 fn

var a; // 声明变量 a

*/


console.log(a); // 这里调用变量 a 时，a 已经被声明但未被赋值，所以 output: undefined
var a = 'hello';

fn(); // output: 执行fn
function fn() {
  console.log('执行fn')
}

变量提升的几种情况

var 声明的变量可以提升，提升时只进行声明，不初始化值。

let、const 声明的变量不会提升（因为有暂时性死区，稍后会说到）。

严格来讲，let / const 在 JavaScript 编译过程中也会被提升，但是由于暂时性死区（TDZ）的缘故，不能在声明语句之前使用 let 变量。

console.log(a); // u ndefined
var a = 'apple';

console.log(b); // Uncaught ReferenceError: b is not defined
let b = 'peach';

console.log(c); // Uncaught ReferenceError: c is not defined
const c = 'grape';

暂时性死区

在当前 let / const 变量所在作用域的顶部开始一直到 let 变量声明之前，这个变量是不能够被引用的。这个区域就是该变量的暂时性死区（TDZ，temporal dead zone）。

{ // foo 变量 TDZ 开始区域
  console.log(bar); // undefined

  console.log(foo); // ReferenceError

  var bar = 1;

  let foo = 2; // foo 变量 TDZ 结束
  console.log(foo); // 2
}

使用术语 “temporal” 是因为暂时性死区取决于代码的执行顺序（代码当前的调用时机），而不是编写代码的顺序（位置）。例如，下面的代码会生效，是因为即使使用 let 变量的函数出现在变量声明之前，但函数的执行是在 TDZ 的外面。

{
  // letVar 变量 TDZ 开始区域
  const func = () => console.log(letVar); // 可以正常调用

  // 在 TDZ 中如果调用 letVar 变量，则抛出引用错误

  let letVar = 3; // letVar 变量 TDZ 结束
  func(); // 在 TDZ 区域外可正常调用
}

暂时性死区与 typeof

如果使用 typeof 检测在暂时性死区中的变量，会抛出异常，引用错误。

console.log(typeof i); // Uncaught ReferenceError: i is not defined
let i = 'hello';

// typeof 检测值未声明的变量则不会抛异常
console.log(typeof undeclaredVariable); // undefined

函数提升的几种情况

并不是所有的函数都是提升整个函数体，函数提升的情况取决于其定义的方式。

函数声明方式定义函数

函数声明的方式定义函数，其函数体会整体提升。所以可以在其声明之前去调用它。

fn();
function fn() {
  console.log('执行fn')
}

函数表达式

函数表达式（将函数赋值给一个变量）的方式定义函数，只会提升变量声明。此时变量 fn 为 undefined。可以访问到，但不可以函数方式去调用它。

fn(); // Uncaught TypeError: fn is not a function
var fn = function() {
  console.log('执行fn');
}

ES6 中的 class

类声明不会提升，需要先声明再使用。

类表达式提升的特性与 var let const声明的变量相同。

new Animal(); // Uncaught ReferenceError: Animal is not defined

class Animal {};

变量提升例子

/**
 提升为：
 function fn() {
   console.log('call fn');
 }
 var a; // var a = undefined;
 */

console.log(a); // undefined
fn(); // call fn

var a = 1;
function fn() {
  console.log('call fn');
}