揭秘 ES6 中 let 与 const 的块级作用域奥秘

在 ES6 中，let 和 const 两个的引入彻底改变了 JavaScript 中变量的作用域规则，带来了强大的块级作用域。本文将深入探索这些关键字的基本用法和特性，揭开块级作用域是如何在 ES6 中实现的。

let 和 const 的基本用法

let 关键字用于声明块级作用域的变量。变量只能在声明它的块中访问，无法在块外访问。例如：

{
  let name = 'John Doe';
  console.log(name); // 'John Doe'
}

console.log(name); // ReferenceError: name is not defined

const 关键字用于声明常量。常量一旦声明，就不能重新赋值。它们也具有块级作用域。例如：

{
  const PI = 3.14;
  console.log(PI); // 3.14
}

PI = 3.15; // TypeError: Assignment to constant variable.

块级作用域原理

块级作用域通过创建一个称为词法环境的新作用域来实现。词法环境由当前块内声明的变量和对父作用域变量的引用组成。

在 ES6 中，代码块可以是代码块 { }、箭头函数 { } 或循环主体 { }。每个块都有自己的词法环境。

例如，以下代码片段创建了一个包含两个块的词法环境：

function outer() {
  let a = 1;

  {
    let b = 2;
    console.log(a + b); // 3
  }

  console.log(a); // 1
}

outer();

在第一个块中，变量 a 和 b 被声明在该块的词法环境中。在第二个块中，变量 a 被从父词法环境中引用。因此，a + b 的值为 3。

变量提升与块级作用域

在传统 JavaScript 中，变量在执行代码之前会被提升到其作用域的顶部。这意味着即使变量在代码块中声明，它仍然可以在块外访问。

然而，在 ES6 中，let 和 const 声明的变量不会被提升。这意味着它们只能在声明它们的块中访问。

例如，以下代码片段不会抛出错误：

console.log(a); // undefined

{
  let a = 1;
}

console.log(a); // 1

这是因为变量 a 没有被提升，因此在第一个 console.log() 调用时是未定义的。

结论

ES6 中的 let 和 const 关键字通过引入块级作用域，为 JavaScript 变量管理带来了一个强大的新维度。通过创建词法环境，它们允许变量在块内作用，有效地消除了作用域冲突和全局变量的意外更改。了解 let 和 const 的基本用法和块级作用域原理对于编写健壮且易于维护的 JavaScript 代码至关重要。