详解 ES6 的 let 与 const 关键字在作用域链中的表现-JavaScript中文网-JavaScript教程资源分享门户

ES6 带来了许多新的语法特性，其中 let 和 const 是其中比较重要的两个。它们在作用域链中的表现和 var 有所不同，本文将详细讲解它们的作用域链表现以及使用方法。

let 关键字

let 关键字用于声明一个块级作用域的变量，它与 var 不同的是，let 声明的变量只在当前块级作用域内有效，不会污染全局作用域。

{
  let a = 1;
  var b = 2;
}
console.log(a); // ReferenceError: a is not defined
console.log(b); // 2

在 for 循环中使用 let 声明变量，可以避免 var 带来的问题。

for (var i = 0; i < 10; i++) {
  setTimeout(function() {
    console.log(i);
  }, 100);
}
// 输出 10 个 10

上面的代码会输出 10 个 10，因为 setTimeout 是异步执行的，当它执行时，for 循环已经执行完了，i 的值已经变成了 10。使用 let 声明变量可以避免这个问题。

for (let i = 0; i < 10; i++) {
  setTimeout(function() {
    console.log(i);
  }, 100);
}
// 输出 0 到 9

使用 let 声明变量，每次循环都会生成一个新的变量，避免了变量共享的问题。

const 关键字

const 关键字用于声明一个只读的常量，一旦声明，它的值就不能再改变。

const PI = 3.14159;
PI = 3; // TypeError: Assignment to constant variable.

使用 const 声明的变量，必须在声明时就初始化，否则会报错。

const PI;
PI = 3.14159; // SyntaxError: Missing initializer in const declaration

const 声明的常量也是块级作用域的。

{
  const PI = 3.14159;
}
console.log(PI); // ReferenceError: PI is not defined

let 和 const 在作用域链中的表现

let 和 const 在作用域链中的表现与 var 有所不同。在块级作用域中使用 let 或 const 声明的变量，在作用域链中只能被它所在的块级作用域访问到，不会被外部作用域访问到。

// javascriptcn.com 代码示例
function foo() {
  if (true) {
    let a = 1;
    const b = 2;
    var c = 3;
  }
  console.log(a); // ReferenceError: a is not defined
  console.log(b); // ReferenceError: b is not defined
  console.log(c); // 3
}

上面的代码中，a 和 b 在 if 块级作用域中声明，它们只能在 if 块级作用域中访问到，不会被外部作用域访问到。而 c 使用 var 声明，它的作用域是整个函数体，可以被函数体中的任何地方访问到。

总结

let 和 const 是 ES6 中比较重要的两个关键字，它们在作用域链中的表现和 var 有所不同，使用它们可以避免变量共享的问题，提高代码的可读性和可维护性。在使用 let 和 const 声明变量时，需要注意它们的作用域链表现，避免出现意料之外的问题。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6550a5f8d2f5e1655da7ae5b