详解JavaScript中var和let的区别

变量的基本特性

ECMAScript 中的变量属于松散类型，意味着变量仅是一个保存任意值的命名占位符，不绑定特定数据类型。在 JavaScript 中，声明变量的关键字主要有三个：var、const 和 let。其中 var 存在于所有版本，而 const 和 let 需配合 ECMAScript 6 (ES6) 及以上环境使用。

var 关键字的使用

var 用于定义变量。如果未初始化，变量值默认为 undefined。同时可以进行赋值操作：

var message = "hi";

var 定义的变量非常灵活，不仅可以改变保存的值，还可以直接修改变量的数据类型。例如将字符串变量重新赋值为数字（尽管在实际开发中不推荐此类做法）：

var message = "hi";
message = 100;

var 的作用域与全局陷阱

使用 var 定义的变量作用域仅限于包含它的函数内部。一旦离开该函数区域，变量即被销毁。

<script>
function test() {
    var message = "hi";
}
test();
console.log(message); <!-- 引用报错 -->
</script>

若要在函数外部访问变量，必须将其定义为全局变量。但在局部作用域中省略 var 会隐式创建全局变量，这种做法极易导致维护混乱，故强烈不建议。

<script>
function test() {
    message = "hi"; 
}
test();
console.log(message); <!-- 输出 hi -->
</script>

var 的提升特性 (Hoisting)

var 声明存在“提升”现象，即引擎会将变量声明自动移动到函数作用域的顶部。因此，在声明语句之前访问变量不会抛出异常，只会得到 undefined。

<script>
    function foo() {
        console.log(age); <!-- 正常输出 undefined，不报错 -->
        var age = 26;
    }
    foo();
</script>

此外，在同一作用域内反复使用 var 声明同一个变量也是合法的，不会产生冲突。

let 的核心差异

let 的引入是为了解决 var 带来的弊端。let 提供了块级作用域，其作用范围严格限制在 {} 包裹的代码块内（块作用域是函数作用域的子集）。

<script>
   if(true){
       var name = "Matt"
       console.log(name);  // 输出 Matt
   }
   console.log(name);    // 依然可以输出 Matt

   if(true){
       let age = 26;
       console.log(age);   // 输出 26
   }
   console.log(age);       // 报错 ReferenceError：age 未定义
</script>

let 的限制条件

let 不允许在相同的块级作用域内进行多次冗余声明。

let age ;
let age ;    // SyntaxError 标识符age已经声明过了

由于 var 不受块级作用域保护，它可以跨块覆盖同名变量；而 let 在不同嵌套块中可以安全重名，互不干扰：

<script>
    var name = "Nicholas";
    if (true) {
        var name = "Matt";     <!-- var 覆盖了外层 -->
        let age = 26;          <!-- let 在此块独立 -->
    }
</script>

当 var 和 let 尝试在同一作用域共享标识符时，也会触发语法错误，因为它们指代的是相同的作用域上下文。

以上就是关于 JavaScript 中 var 和 let 的详细对比 的完整解析，更多实用的前端编程技巧请持续关注本站！