函数作用域：`var` 变量的提升与函数内作用域

各位靓仔靓女，今天咱们来聊聊 JavaScript 里“磨人的小妖精”——var 变量的提升与函数内作用域！

大家好！我是你们的“码农老司机”，今天咱们不开车，咱们开脑洞！🚗💨 聊聊 JavaScript 里一个让人又爱又恨、又挠头又上瘾的特性：var 变量的提升（Hoisting）以及它在函数内的“爱恨情仇”。

准备好了吗？系好安全带，我们要开始一场关于变量的奇幻漂流了！ 🌊

1. 变量的“升仙之路”：var 的 Hoisting 机制

首先，我们要弄清楚什么是“提升”。别误会，不是说变量突然变得高大威猛，迎娶白富美，走上人生巅峰！ 🙅‍♀️🙅‍♂️ 这里的提升，指的是 JavaScript 在执行代码之前，会偷偷地把 var 声明的变量“嗖”的一下，提到当前作用域的顶部。

想象一下，你正在参加一场盛大的 party，突然发现自己没带邀请函。正当你手足无措的时候，一个神秘人悄悄地走到你身边，塞给你一张 VIP 通行证，让你畅通无阻地进入会场。这就是 var 的 Hoisting 机制，它就像那个神秘人，给你一个进入作用域的“通行证”。

重点来了！ 虽然变量被提升了，但是它的赋值并没有跟着一起提升。也就是说，变量只是被声明了，但还没有被赋值。这个时候，如果你试图访问这个变量，你会得到什么呢？ 没错，就是 undefined！

console.log(myVar); // 输出：undefined
var myVar = "Hello, Hoisting!";
console.log(myVar); // 输出：Hello, Hoisting!

是不是有点懵？ 🤯 别着急，咱们来分解一下：

1. 第一阶段：编译阶段（偷偷摸摸的“升仙”过程）

   JavaScript 引擎偷偷地把 var myVar; 提升到了代码的最前面，但 myVar = "Hello, Hoisting!"; 仍然留在原地。

2. 第二阶段：执行阶段（按部就班的赋值过程）

   • 首先，console.log(myVar) 执行时，myVar 已经被声明了，但还没有赋值，所以输出 undefined。
   • 然后，执行 myVar = "Hello, Hoisting!";，myVar 被赋值为 "Hello, Hoisting!"。
   • 最后，console.log(myVar) 执行时，myVar 已经被赋值了，所以输出 "Hello, Hoisting!"。

用表格来总结一下：

代码行	变量状态	输出
console.log(myVar);	已声明，未赋值	undefined
var myVar = ...	声明并赋值	–
console.log(myVar);	已声明，已赋值	Hello, Hoisting!

温馨提示： 这种提升机制只发生在 var 声明的变量身上。用 let 和 const 声明的变量，虽然也会被提升，但是它们不会被初始化，所以在声明之前访问它们会抛出一个 ReferenceError。 这就像进入 party 的时候，你有 VIP 通行证，但保安还是拦着你，说你没有完成“身份验证”。 👮‍♀️

2. 函数内的“爱恨情仇”：var 的函数作用域

var 变量还有一个重要的特性，那就是它的作用域是函数作用域。 也就是说，在函数内部用 var 声明的变量，只能在该函数内部访问。 出了这个函数，你就找不到它了。 就像你参加完 party，VIP 通行证就失效了，只能乖乖地离开会场。 🚶‍♀️🚶‍♂️

function myFunction() {
  var myLocalVar = "I'm a local variable!";
  console.log(myLocalVar); // 输出：I'm a local variable!
}

myFunction();
console.log(myLocalVar); // 报错：ReferenceError: myLocalVar is not defined

在这个例子中，myLocalVar 是在 myFunction 内部用 var 声明的，所以它只能在 myFunction 内部访问。在函数外部访问它会报错。

但是！ 如果你在函数内部没有用 var 声明变量，而是直接赋值，那么这个变量就会变成全局变量。 这就像你把 VIP 通行证偷偷地带出了会场，然后可以在任何地方使用它。 ⚠️

function myFunction() {
  myGlobalVar = "I'm a global variable!"; // 注意：没有使用 var 声明
  console.log(myGlobalVar); // 输出：I'm a global variable!
}

myFunction();
console.log(myGlobalVar); // 输出：I'm a global variable!

在这个例子中，myGlobalVar 在 myFunction 内部没有用 var 声明，而是直接赋值，所以它就变成了全局变量，可以在任何地方访问。

总结一下：

• 在函数内部用 var 声明的变量，是函数作用域的，只能在该函数内部访问。
• 在函数内部没有用 var 声明变量，而是直接赋值，那么这个变量就会变成全局变量。

3. var 的“坑”：需要注意的地方

var 变量的提升和函数作用域机制，在某些情况下可能会导致一些意想不到的问题。 就像你在 party 上喝多了，可能会做出一些让你后悔的事情。 🥂 所以，在使用 var 的时候，一定要小心谨慎，避免掉入 “坑” 里。

坑 1：循环中的闭包问题

这是一个经典的 var 变量的“坑”。 来看一个例子：

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

你觉得这段代码会输出什么？ 0, 1, 2, 3, 4 吗？ No! 🙅‍♀️ 它会输出 5 个 5！

为什么呢？ 因为在循环结束之后，i 的值已经变成了 5。而 setTimeout 中的函数是在循环结束之后才执行的。 由于 var 声明的变量具有函数作用域，所以在所有 setTimeout 中的函数都共享同一个 i 变量。 所以，当这些函数执行的时候，它们访问的 i 变量的值都是 5。

解决方法：

• 使用 IIFE (Immediately Invoked Function Expression)

  for (var i = 0; i < 5; i++) {
    (function(j) {
      setTimeout(function() {
        console.log(j);
      }, 1000);
    })(i);
  }

  在这个例子中，我们使用了一个 IIFE 来创建一个新的作用域。 每次循环迭代，IIFE 都会创建一个新的作用域，并将当前的 i 值作为参数传递给 IIFE。 这样，每个 setTimeout 中的函数都访问的是 IIFE 中 j 变量的副本，而不是共享同一个 i 变量。

• 使用 let

  for (let i = 0; i < 5; i++) {
    setTimeout(function() {
      console.log(i);
    }, 1000);
  }

  let 声明的变量具有块级作用域，所以在每次循环迭代中，都会创建一个新的 i 变量。 这样，每个 setTimeout 中的函数都访问的是自己作用域内的 i 变量，而不是共享同一个 i 变量。

坑 2：重复声明变量

用 var 声明变量的时候，可以重复声明同一个变量，而不会报错。 这可能会导致一些难以调试的问题。

var myVar = "Hello";
var myVar = "World";
console.log(myVar); // 输出：World

在这个例子中，myVar 被重复声明了两次。 后面的声明会覆盖前面的声明，导致 myVar 的值变成 "World"。

解决方法：

• 使用 let 或 const

  let 和 const 声明的变量不允许重复声明。 如果尝试重复声明同一个变量，会抛出一个 SyntaxError。 这可以帮助你避免一些因重复声明变量而导致的问题。

4. 总结：拥抱新世界，告别 var？

通过上面的讲解，相信大家对 var 变量的提升和函数作用域机制有了更深入的了解。 var 就像一个老朋友，陪伴我们走过了 JavaScript 的早期岁月。 但是，随着 JavaScript 的不断发展，新的变量声明方式 let 和 const 提供了更安全、更可预测的作用域规则。

现在，越来越多的开发者开始拥抱 let 和 const，并逐渐告别 var。 这就像你从一个老旧的自行车换成了一辆酷炫的电动车，速度更快，也更环保。 🚲➡️ 🛵

当然，var 并没有完全退出历史舞台。 在一些老项目中，你仍然可能会遇到 var。 所以，了解 var 的特性仍然是很有必要的。

最后的建议：

• 尽可能使用 let 和 const 来声明变量。
• 避免在循环中使用 var。
• 注意重复声明变量的问题。

希望今天的分享对大家有所帮助！ 祝大家编码愉快！ 🎉