js 中var的深入理解和常见的坑

前言：

        在JavaScript中，var 是用于声明变量的关键字，但它有一些特殊的行为和一些常见的坑。在深入理解 var 之前，先了解一下 var 的一些基本特点。

正文：

常见的 var 的一些坑：

        为了避免这些问题，推荐使用 let 和 const 替代 var。它们引入了块级作用域，并且不会出现变量提升导致的问题。如果需要在整个函数或全局范围内使用变量，可以考虑使用 let。如果变量的值不会改变，可以使用 const。

1.函数作用域： 

        var 声明的变量具有函数作用域，而不是块级作用域。这意味着变量在声明它的函数内部是可见的，而在函数外部是不可见的。

function example() {
  if (true) {
    var x = 10;
  }
  console.log(x); // 10
}

        在上面的例子中，x 虽然在 if 块中声明，但由于 var 具有函数作用域，x 在整个 example 函数中都是可见的。

2.变量提升： 

        使用 var 声明的变量会在其所在的作用域内被提升到函数（或全局）的顶部。这意味着你可以在声明之前使用变量，但它的值会是 undefined。

console.log(y); // undefined
var y = 5;

        在上面的例子中，var y 虽然在 console.log 之后声明，但由于变量提升，程序不会报错，而是输出 undefined。

3.全局变量污染：

        当你在函数内部使用 var 声明一个变量时，如果忘记使用 var 关键字，它将成为一个全局变量。

function example() {
  x = 10; // 没有使用 var，将创建一个全局变量
}
example();
console.log(x); // 10

        在上面的例子中，x 变成了全局变量，这可能导致意外的副作用和错误。

4.变量提升可能导致混淆： 

        变量提升可能导致代码的可读性下降，因为变量的声明和初始化可能在代码中的不同位置。

console.log(z); // undefined
var z = 20;

        在上面的例子中，var z 被提升，但是初始化的值并没有被提升，因此 console.log 输出 undefined。