潜入JS变量提升的领域 - 深入了解其复杂机制

2023-12-12 13:01:26

在JavaScript中，变量提升是解释器在执行任何代码之前，将变量提升到其作用域顶部的行为。这会导致一些有趣的和潜在的混乱的情况，特别是当涉及到函数作用域时。

全局变量

全局变量是在函数之外声明的变量。它们在脚本的任何地方都可以访问。全局变量提升到全局作用域的顶部。这意味着您可以使用全局变量，即使您在声明它们之前使用它们。

console.log(myGlobal); // undefined
var myGlobal = 10;
console.log(myGlobal); // 10

局部变量

局部变量是在函数内部声明的变量。它们只能在声明它们的函数内部使用。局部变量提升到函数作用域的顶部。这意味着您可以使用局部变量，即使您在声明它们之前使用它们。

function myFunction() {
  console.log(myLocal); // undefined
  var myLocal = 10;
  console.log(myLocal); // 10
}

myFunction();

函数变量

函数变量是通过function声明的变量。它们只能在声明它们的函数内部使用。函数变量提升到函数作用域的顶部。这意味着您可以使用函数变量，即使您在声明它们之前使用它们。

function myFunction() {
  function myNestedFunction() {
    console.log(myFunctionVariable); // undefined
    var myFunctionVariable = 10;
    console.log(myFunctionVariable); // 10
  }

  myNestedFunction();
}

myFunction();

if语句中

在if语句中声明的变量提升到if语句块的顶部。这意味着您可以在if语句块中的任何地方使用这些变量，即使您在声明它们之前使用它们。

if (true) {
  console.log(myIfVariable); // undefined
  var myIfVariable = 10;
  console.log(myIfVariable); // 10
}

console.log(myIfVariable); // ReferenceError: myIfVariable is not defined