js 变量提升

js 变量提升

在学习 JavaScript 编程语言的过程中，我们经常会遇到一个概念叫做变量提升。这个概念指的是在 JavaScript 代码执行之前，JavaScript 引擎会扫描整个代码，将变量和函数的声明提升到代码的顶部。这意味着我们可以在声明一个变量或函数之前就使用它们。

变量提升的实例

首先，让我们来看一个简单的示例来说明变量提升的概念。考虑下面这段 JavaScript 代码：

console.log(x); // 输出：undefined
var x = 5;

在上面的代码中，我们在使用变量 x 之前就对其进行了打印输出。根据变量提升的原则，变量 x 的声明会被提升到代码的顶部，因此不会报错，而是输出 undefined。当然，如果我们在变量声明之前尝试访问变量的值，会得到 undefined。

再看一个更复杂的示例：

function foo() {
  console.log(y); // 输出：undefined
  var y = 10;
}

foo();

在这个示例中，虽然我们在函数 foo 中尝试访问变量 y 的值，但由于变量提升的原因，输出的是 undefined。

函数声明与函数表达式的差异

除了变量，函数的声明也会被提升。但是需要注意的是，函数声明和函数表达式在变量提升方面会有一些差异。让我们来看一个示例：

foo(); // 输出：Hello World!

function foo() {
  console.log("Hello World!");
}

bar(); // 报错：Uncaught ReferenceError: bar is not defined

var bar = function() {
  console.log("Goodbye World!");
}

在上面的代码中，我们首先调用了函数 foo，因为函数声明会被提升，所以不会报错。但在调用函数 bar 时却会报错，因为函数表达式并不会被提升。也就是说，我们可以在一个函数之前调用另一个函数，但不能在一个函数表达式之前调用另一个函数表达式。

let 和 const 的提升

在 ES6 中引入了 let 和 const 来声明变量，它们的作用域与 var 不同。与 var 不同，let 和 const 不会被提升到当前的执行上下文。因此，如果我们在使用前访问 let 或 const 声明的变量，会得到暂时性死区（Temporal Dead Zone，简称 TDZ）的错误。让我们看一个示例：

console.log(z); // 报错：Uncaught ReferenceError: Cannot access 'z' before initialization
let z = 20;

在上面的代码中，我们尝试访问变量 z 的值，但会得到一个错误。这是因为 let 声明的变量不会被提升，所以在声明前访问变量 z 会导致暂时性死区的错误。

总结

变量提升是 JavaScript 中一个重要且容易混淆的概念。通过这篇文章的介绍，相信读者对变量提升有了更清晰的理解。在编写 JavaScript 代码时，需要注意变量提升的影响，尽量在声明变量和函数之后再使用它们，以避免出现意外的错误。