JavaScript三大变量声明详析

在JavaScript中，我们经常需要声明变量来存储和操作数据。常见的变量声明有三种：var、let和const。本文将详细讲解这三种变量声明的特点和使用方法。

var

var是ES5标准引入的变量声明关键字。使用var声明的变量拥有函数作用域（function scope），即在函数中声明的变量只在该函数内部有效。如果在函数外部调用var声明的变量，会得到undefined的结果。

function foo() {
  var a = 1;
}
foo();
console.log(a); // 报错：a未定义

var的特性还包括声明提升（hoisting），即在函数内部无论在哪里声明var变量，该变量都会被视为在函数作用域顶部声明，因此可以在声明前使用该变量。

function foo() {
  console.log(a); // 输出undefined
  var a = 1;
}
foo();

值得注意的是，在var声明的变量在声明前访问时，会返回undefined，这是因为在声明前该变量已经存在，但是还未被赋值。所以，虽然变量声明会被提升，但是赋值操作仍然是按照代码中出现的先后顺序执行的。

let

let是ES6标准引入的块级作用域（block scope）变量声明关键字。块级作用域指的是在代码块（由花括号包裹的语句序列）内部声明的变量，只在该代码块内有效。与var不同的是，let不存在声明提升，所以必须先声明再使用，否则会抛出ReferenceError错误。

function foo() {
  console.log(a); // 报错：a未定义
  let a = 1;
}
foo();

let变量还有一个非常重要的特性，就是允许在同一作用域内重复声明变量。这是因为每次声明的let变量都是一个新的变量，不会影响前面已经声明的同名变量。

function foo() {
  let a = 1;
  let a = 2; // 合法
  console.log(a); // 输出2
}
foo();

但是，在let声明变量前访问该变量，同样会抛出ReferenceError错误，这与var是一致的。

const

const也是ES6标准引入的块级作用域变量声明关键字。与let类似，const声明的变量也是块级作用域的，不存在声明提升的情况。但是，与let和var不同的是，const是一个常量，一旦声明就不能更改其值。

function foo() {
  const a = 1;
  a = 2; // 报错：Assignment to constant variable.
}
foo();

但是，如果使用const声明的变量是一个对象或数组，虽然不能对该变量重新赋值，但是可以修改该变量所引用的对象或数组的属性或元素。

function foo() {
  const obj = { a: 1 };
  obj.b = 2; // 合法
  console.log(obj); // 输出{ a: 1, b: 2 }
}
foo();

示例1

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

在上面的示例中，使用var声明的i变量拥有函数作用域，即在整个for循环中只有一个变量i，循环中定义的多个setTimeout共享同一个i变量。由于setTimeout是一个异步函数，代码执行到setTimeout时，for循环已经结束，此时i的值为5。因此，无论循环执行了多少次，最终输出的结果都是5。

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

在上面的示例中，使用let声明的i变量拥有块级作用域，循环中定义的多个setTimeout都有各自的i变量。同时，由于let不存在声明提升，所以各个setTimeout函数在执行时，所引用的i变量都能正确地取到循环迭代中的当前值。因此，输出的结果是0、1、2、3、4。

示例2

const obj = { a: 1 };
obj.b = 2;
console.log(obj); // 输出{ a: 1, b: 2 }
obj = { c: 3 }; // 报错：Assignment to constant variable.

在上面的示例中，首先使用const声明了一个对象obj，然后修改了该对象的属性值，但是并没有对该变量重新赋值。这是合法的，因为const只是保证变量所引用的对象不会改变，而不是保证该对象的属性不能被修改。

然后，尝试对obj重新赋值，会得到一个Assignment to constant variable错误。这是因为const声明的变量是一个常量，一旦声明就不能更改其值。

本文链接：http://task.lmcjl.com/news/8700.html