JavaScript变量提升与作用域，你真正理解了吗？

前端

2024-02-17 07:41:36

JavaScript的世界：变量提升与作用域的奇幻之旅

想象一下，你正在玩一场角色扮演游戏。你是一个勇敢的冒险者，穿越在JavaScript的世界中，遇到了各种各样的怪兽和挑战。在这个世界里，变量提升和作用域就好像游戏规则一样，影响着你的冒险进程。

第一幕：认识变量提升

你刚刚踏入JavaScript的世界，就开始遇到了奇怪的现象。当你使用一个变量，却发现它在代码中被定义之前就已经存在了。这是怎么回事？

这就是变量提升。

在JavaScript中，变量在执行代码之前就会被提升到作用域的顶部。这意味着，即使你在代码中把变量放在后面定义，你也可以在前面使用它，而且它会默认被赋予undefined值。

例如，你可以写出这样的代码：

console.log(myVariable); // undefined
var myVariable = "Hello, world!";

在这个例子中，myVariable在被定义之前就被提升到了全局作用域的顶部，所以你可以在console.log()中使用它，即使它还没有被赋值。

第二幕：探索作用域的奥秘

随着你的冒险深入，你发现了JavaScript中的另一个重要概念：作用域。

作用域决定了变量的可访问性。在JavaScript中，有三种主要的作用域：

全局作用域：在整个程序中都可以访问的变量。
局部作用域：只在函数内部可以访问的变量。
块级作用域：只在代码块（例如，{}括起来的代码块）内部可以访问的变量。

如果你在全局作用域中定义一个变量，那么它可以在程序的任何地方访问。如果你在函数内部定义一个变量，那么它只能在该函数内部访问。如果你在代码块中定义一个变量，那么它只能在该代码块内部访问。

例如，你可以写出这样的代码：

// 全局变量
var globalVariable = "Hello, world!";

// 局部变量
function myFunction() {
  var localVariable = "I am local!";
}

// 代码块变量
{
  var blockVariable = "I am in a block!";
}

console.log(globalVariable); // "Hello, world!"
console.log(localVariable); // ReferenceError: localVariable is not defined
console.log(blockVariable); // ReferenceError: blockVariable is not defined

在这个例子中，globalVariable可以在程序的任何地方访问。localVariable只能在myFunction()函数内部访问。blockVariable只能在代码块内部访问。

第三幕：揭开闭包的神秘面纱

在你的冒险中，你遇到了一个神秘的生物，它叫做闭包。

闭包是一种函数，它可以在定义它的函数之外访问该函数的变量。

例如，你可以写出这样的代码：

function createCounter() {
  var counter = 0;

  return function() {
    counter++;
    return counter;
  };
}

var counterFunction = createCounter();

console.log(counterFunction()); // 1
console.log(counterFunction()); // 2
console.log(counterFunction()); // 3