JS 避免 `var` 带来的变量提升陷阱与作用域链问题

各位老铁，大家好！今天咱们聊聊JavaScript里一个让人又爱又恨的话题：var。没错，就是那个曾经陪伴我们无数个日夜，现在却恨不得赶紧抛弃的var。别急着扔臭鸡蛋，var当年也辉煌过，只是时代变了，它的一些特性现在成了绊脚石。今天咱们就来扒一扒var的皮，看看它到底带来了哪些坑，以及如何优雅地避开这些坑，拥抱更美好的JavaScript世界。

一、var的“原罪”：变量提升

首先，咱们要说的就是var最臭名昭著的特性：变量提升（Hoisting）。啥是变量提升？简单来说，就是JavaScript在执行代码之前，会先把var声明的变量“提升”到当前作用域的顶部。注意，只是声明提升，赋值并没有提升！

举个栗子：

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

咋回事？第一行代码明明在声明x之前，怎么没有报错？这就是变量提升在作祟。 JavaScript引擎偷偷地把var x; 提升到了代码的最前面，所以第一行相当于：

var x; // 变量提升
console.log(x); // 输出：undefined (因为还没有赋值)
x = 10;
console.log(x); // 输出：10

问题来了：

迷惑性： 代码的执行顺序和我们看到的顺序不一致，容易让人摸不着头脑。
潜在Bug： 如果我们在声明之前使用了一个var变量，但又忘记了赋值，就会得到undefined，这可能会导致一些难以追踪的bug。

避免方法：

永远在作用域顶部声明var变量： 虽然var有变量提升，但如果我们养成在作用域顶部声明变量的习惯，就可以避免很多问题。就像这样：
```
function foo() {
  var x, y, z; // 在函数顶部声明所有变量
  x = 1;
  y = 2;
  z = 3;
  console.log(x, y, z);
}
```

使用let和const： 这是最推荐的方法！ let和const解决了var的变量提升问题，它们声明的变量只有在声明之后才能访问，否则会报错。这被称为“暂时性死区”（Temporal Dead Zone，TDZ）。

console.log(x); // 报错：ReferenceError: Cannot access 'x' before initialization
let x = 10;
console.log(x); // 输出：10

console.log(y); // 报错：ReferenceError: Cannot access 'y' before initialization
const y = 20;
console.log(y); // 输出：20

二、var的“罪恶之手”：函数作用域

var声明的变量只有函数作用域（Function Scope），这意味着它只能在声明它的函数内部访问。如果在函数外部声明var变量，它就变成了全局变量。

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

foo();
console.log(x); // 报错：ReferenceError: x is not defined

问题来了：

全局变量污染： 如果我们在多个地方都声明了同名的var变量，就很容易造成全局变量污染，导致代码冲突和不可预测的行为。
循环中的闭包问题： 这是var最经典的坑之一。在循环中使用var声明的变量，由于变量提升和函数作用域，会导致闭包捕获的是同一个变量的最终值，而不是每次循环的值。
```
for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i); // 输出：5, 5, 5, 5, 5
  }, 1000);
}
```
咋回事？按照我们的预期，应该输出0, 1, 2, 3, 4才对。这是因为setTimeout是异步执行的，当循环结束时，i的值已经变成了5。而且，由于var的函数作用域，所有的setTimeout回调函数都共享同一个变量i，所以最终都输出了5。

解决循环中的闭包问题：

使用立即执行函数（IIFE）： 这是传统的解决方案。我们可以使用IIFE来为每次循环创建一个独立的作用域，将当前的i值传递给IIFE的参数，从而让每个setTimeout回调函数都捕获到不同的i值。
```
for (var i = 0; i < 5; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j); // 输出：0, 1, 2, 3, 4
    }, 1000);
  })(i);
}
```
使用let： 这才是最优雅的解决方案！ let声明的变量具有块级作用域（Block Scope），这意味着它只能在声明它的代码块（例如，if语句、for循环等）内部访问。在循环中使用let声明的变量，每次循环都会创建一个新的变量，从而避免了闭包问题。
```
for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i); // 输出：0, 1, 2, 3, 4
  }, 1000);
}
```
是不是感觉世界都美好了？

三、let和const的“救赎”

let和const是ES6引入的两个新的变量声明关键字，它们解决了var的诸多问题，让JavaScript代码更加可预测和易于维护。

特性	`var`	`let`	`const`
作用域	函数作用域	块级作用域	块级作用域
变量提升	有	无	无
重复声明	允许	不允许	不允许
修改变量值	允许	允许	不允许

let的优点：

块级作用域： 避免全局变量污染，提高代码可维护性。
无变量提升： 代码执行顺序和我们看到的顺序一致，减少迷惑性。
不允许重复声明： 避免意外覆盖变量。

const的优点：

拥有let的所有优点。
声明常量： 声明的变量必须初始化，且值不能被修改（对于对象和数组，只是不能重新赋值，但可以修改对象或数组内部的属性或元素）。这可以提高代码的可读性和安全性。

let和const的使用场景：

const： 用于声明常量，例如，API地址、配置信息等。
let： 用于声明变量，例如，循环计数器、临时变量等。

最佳实践：

默认使用const： 如果变量的值不会被修改，就使用const。
如果变量的值需要被修改，就使用let。
永远不要使用var！ （除非你需要兼容老版本的浏览器）

四、作用域链的“秘密”

说完了var、let和const，我们再来聊聊作用域链（Scope Chain）。作用域链是JavaScript查找变量的机制。当我们在代码中使用一个变量时，JavaScript引擎会首先在当前作用域中查找该变量。如果找不到，就会沿着作用域链向上查找，直到找到该变量或者到达全局作用域。

举个栗子：

var globalVar = "全局变量";

function outerFunction() {
  var outerVar = "外部函数变量";

  function innerFunction() {
    var innerVar = "内部函数变量";
    console.log(innerVar); // 输出：内部函数变量
    console.log(outerVar); // 输出：外部函数变量
    console.log(globalVar); // 输出：全局变量
  }

  innerFunction();
}

outerFunction();

在这个例子中，innerFunction的作用域链是：

innerFunction自身的作用域。
outerFunction的作用域。
全局作用域。

当innerFunction要访问outerVar时，它会首先在自身的作用域中查找，找不到，然后沿着作用域链向上查找，在outerFunction的作用域中找到了outerVar。

作用域链和闭包的关系：

闭包是指函数与其周围状态（词法环境）的捆绑。换句话说，闭包允许函数访问其创建时所在的作用域，即使该函数已经离开了该作用域。

在上面的例子中，innerFunction就是一个闭包，它可以访问outerFunction的变量outerVar，即使outerFunction已经执行完毕。

let和const对作用域链的影响：

let和const引入的块级作用域，使得作用域链更加清晰和可预测。我们可以更容易地理解变量的作用范围，避免一些潜在的错误。

五、总结

var虽然曾经是JavaScript的基石，但由于它的变量提升和函数作用域等特性，容易导致一些难以追踪的bug。 let和const的出现，解决了var的诸多问题，让JavaScript代码更加可预测和易于维护。因此，我们应该尽量使用let和const，避免使用var。

问题	`var`	`let/const`	解决方案
变量提升	存在，可能导致意外的`undefined`行为。	不存在，在声明前访问会抛出错误。	始终在使用前声明变量；使用`let/const`避免变量提升。
作用域	函数作用域，容易导致全局变量污染。	块级作用域，限制变量的作用范围，减少污染。	使用`let/const`声明变量，避免全局变量污染。
循环中的闭包	容易捕获到循环结束时的变量值。	每次循环创建一个新的变量副本。	使用`let`声明循环变量，或者使用IIFE。
重复声明	允许，可能导致意外的变量覆盖。	不允许，避免意外的变量覆盖。	避免重复声明变量，使用`let/const`可以防止重复声明。

希望今天的分享能帮助大家更好地理解JavaScript的变量声明和作用域，写出更加健壮和可维护的代码。记住，拥抱let和const，远离var的坑！

各位，下次再见！

发表回复 取消回复

发表回复取消回复