JavaScript 老旧的 "var" 关键字

在 ES6 (ES2015) 之前，JavaScript 中声明变量的唯一方式是使用 var 关键字。虽然现在有了 let 和 const，但了解 var 的特性仍然很重要，特别是在维护旧代码时。

var 的主要特点

1. 函数作用域 (而非块级作用域)

   • var 声明的变量在函数内部任何地方都是可用的
   • 不同于 let 和 const 的块级作用域

   function example() {
     if (true) {
       var x = 10;
     }
     console.log(x); // 输出 10，因为 var 是函数作用域
   }
   

2. 变量提升 (Hoisting)

   • var 声明会被提升到函数或全局作用域的顶部
   • 只有声明被提升，赋值不会被提升

   console.log(y); // 输出 undefined 而非报错
   var y = 5;
   

3. 可重复声明

   • 同一个作用域内可以多次声明同一个变量名

   var z = 1;
   var z = 2; // 不会报错
   

4. 全局作用域

   • 在函数外部使用 var 会创建全局变量
   • 这些变量会成为全局对象 (浏览器中是 window) 的属性

   var globalVar = '我是全局的';
   console.log(window.globalVar); // 在浏览器中输出 "我是全局的"
   

为什么 var 被认为有问题

1. 意外的全局变量

   • 忘记使用 var 会隐式创建全局变量
   • 严格模式下这会报错

2. 作用域问题

   • 函数作用域可能导致意外的变量共享
   • 经典的 for 循环问题:

   for (var i = 0; i < 3; i++) {
     setTimeout(function() {
       console.log(i); // 输出 3, 3, 3 而不是 0, 1, 2
     }, 100);
   }
   

3. 可读性和维护性

   • 变量提升可能导致代码难以理解
   • 重复声明可能导致意外的覆盖

现代最佳实践

1. 优先使用 const 声明不变的变量
2. 需要重新赋值时使用 let
3. 避免使用 var，除非有特殊需求或维护旧代码
4. 使用严格模式 ('use strict') 来避免隐式全局变量

// 现代写法
let count = 0;
const MAX_SIZE = 100;

for (let i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // 正确输出 0, 1, 2
  }, 100);
}

理解 var 的行为对于阅读和维护旧代码非常重要，但在新代码中应该优先使用 let 和 const。