Hoey

外观

变量声明

约 1026 字大约 3 分钟

2026-03-31

思考

  1. 变量声明的方式与它们的区别？

在 JavaScript 中，有多种变量声明方式，主要包括使用 var、let、const 关键字，其中 let、const 是在 ES6 中引入的。

1. var

  • 特点
    • 函数作用域：var 声明的变量为函数作用域，意味着在函数内部任何位置声明的 var 变量，在整个函数内部都是可见的。
    • 变量提升：使用 var 声明的变量会被提升到当前作用域的顶部，可以在声明之前访问，但值为 undefined。
    • 可重复声明：在同一作用域内可以多次使用 var 声明同一个变量。
  • 示例代码
function testVar() {
  console.log(num); // 输出: undefined
  var num = 10;
  console.log(num); // 输出: 10
  var num = 20; // 可以重复声明
  console.log(num); // 输出: 20
}
testVar();

想一想，下面的代码输出什么？为什么？

JS code example

console
Click the run button to execute the code ...

2. let

  • 特点
    • 块级作用域：let 声明的变量具有块级作用域，变量只在声明它的块（如 if 语句、for 循环、while 循环等）内部可见。
    • 不存在变量提升：let 声明的变量不会被提升到当前作用域的顶部，在声明之前访问会导致 ReferenceError。
    • 不可重复声明：在同一作用域内不能使用 let 重复声明同一个变量。
  • 示例代码
function testLet() {
  // console.log(count); // 报错: ReferenceError: Cannot access 'count' before initialization
  let count = 10;
  console.log(count); // 输出: 10
  // let count = 20; // 报错: SyntaxError: Identifier 'count' has already been declared
  if (true) {
    let innerCount = 20;
    console.log(innerCount); // 输出: 20
  }
  // console.log(innerCount); // 报错: ReferenceError: innerCount is not defined
}
testLet();

3. const

  • 特点
    • 块级作用域：和 let 一样，const 声明的常量具有块级作用域。
    • 不存在变量提升：const 声明的常量不会被提升到当前作用域的顶部，在声明之前访问会导致 ReferenceError。
    • 必须初始化：使用 const 声明常量时，必须同时进行初始化，否则会报错。
    • 常量值不可变（基本类型）：一旦声明并初始化，基本类型的常量的值就不能再被重新赋值，但如果常量是引用类型（如对象、数组），可以修改其内部属性。
    • 不可重复声明：在同一作用域内不能使用 const 重复声明同一个常量。
  • 示例代码
function testConst() {
  // const PI; // 报错: SyntaxError: Missing initializer in const declaration
  const PI = 3.14;
  // PI = 3.14159; // 报错: TypeError: Assignment to constant variable.
  console.log(PI); // 输出: 3.14

  const person = { name: "Alice" };
  person.name = "Bob"; // 可以修改对象的属性
  console.log(person.name); // 输出: Bob
}
testConst();

总结

声明方式作用域提升情况可重复声明初始化要求值可变性
var函数作用域变量提升是否是
let块级作用域无提升否否是
const块级作用域无提升否是基本类型不可变，引用类型可修改内部属性

在实际开发中，建议优先使用 const 声明常量，当需要重新赋值时使用 let，尽量避免使用 var 以减少潜在的问题。

问题补充

想一想，下面的代码输出什么？

JS code example

console
Click the run button to execute the code ... 
for (var i = 0; i < 5; ++i) {
  setTimeout(() => console.log(i), 0);
}
for (let i = 0; i < 5; ++i) {
  setTimeout(() => console.log(i), 0);
}
  • var 声明的变量具有函数作用域，且在循环中共享同一个闭包变量 i。当 setTimeout 回调执行时，循环早已结束，i 的值为 5。
  • let 声明的变量具有块级作用域，每次循环迭代都会创建一个新的词法环境，每个 setTimeout 回调捕获的是各自迭代中的 i 值。

若仍然想要使用 var 声明且依次打印 i，可以使用 IIFE 立即执行函数的特性：立即执行函数会形成一个独立的作用域。

for (var i = 0; i < 5; ++i) {
  (function (i) {
    setTimeout(() => console.log(i), 0);
  })(i)
}