JavaScript 中 var 和 let 的区别

一、JavaScript 块级作用域

使用 var 关键字声明的变量不具备块级作用域的特性，它在 {} 外依然能被访问到。

{ 
    var x = 2; 
}
// 这里可以使用 x 变量

let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。

{ 
    let x = 2;
}
// 这里不能使用 x 变量

二、重新定义变量

在块中重新声明变量，也会重新声明块外的变量：

var x = 1;          // 这里输出 x 为 1
{ 
    var x = 2;      // 这里输出 x 为 2
}
                    // 这里 x 为 2

let 关键字就可以解决这个问题，因为它只在 let 命令所在的代码块 {} 内有效。

var x = 1;              // 这里输出 x 为 1
{ 
    let x = 2;          // 这里输出 x 为 2
}
                        // 这里 x 为 1

三、循环作用域

使用 var 关键字，声明的变量是全局的，包括循环体内与循环体外：

var i = 5;
for (var i = 0; i < 10; i++) 
{
    // 代码段...
}
   // 这里 i 为 10

使用 let 关键字，声明的变量作用域只在循环体内，循环体外的变量不受影响：

let i = 5;
for (let i = 0; i < 10; i++) 
{
    // 代码段...
}
    // 这里 i 为 5

四、HTML 代码中使用全局变量

使用 var 关键字声明的全局作用域变量属于 window 对象：

<p id="demo"></p>

<script>
var name= "zhangsan";

// 可以使用 window.name 访问变量
document.getElementById("demo").innerHTML = "My name is " + window.name;
</script>

使用 let 关键字声明的全局作用域变量不属于 window 对象：

<p id="demo"></p>

<script>
let name= "zhangsan";

// 不可以使用 window.name 访问变量
document.getElementById("demo").innerHTML = "My name is " + window.name;
</script>

五、变量提升

JavaScript 中，var 关键字定义的变量可以在使用后声明，也就是变量可以先使用再声明：

<script>
    Name = "张三";
    document.getElementById("demo").innerHTML = Name;
    var Name;
</script>

let 关键字定义的变量则不可以在使用后声明，也就是变量需要先声明再使用。

// 在这里不可以使用 Name 变量

 let Name;