让变量各司其职——细说let、const和块级作用域

2024-01-02 23:15:23

变量提升

要了解作用域，就必须先了解变量提升。变量提升是指在JavaScript中执行上下文发作方式的一种。具体表现方式就是所有通过var声明的变量会提升到当前作用域的最前面，而用let和const声明的变量则不会。

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

function example() {
    console.log(a);
    let a = 10;
}
example(); //输出ReferenceError: a is not defined

在这个例子中，由于使用了var声明，变量a被提升到了example函数的作用域的最前面，因此在使用前就可以访问它。而使用let声明的变量a则不会被提升，因此在使用前必须先声明。

let和const

let和const都是用于声明变量的，但它们之间存在一些关键的区别。

let ：let声明的变量具有块级作用域，这意味着它们只能在声明它们的代码块内访问。一旦离开这个代码块，变量就无法再被访问。
const ：const声明的变量是常量，这意味着它们的值在声明后就不能再被修改。const声明的变量也具有块级作用域。

{
  let a = 10;
  const b = 20;
  console.log(a); //输出10
  console.log(b); //输出20
}

console.log(a); //输出ReferenceError: a is not defined
console.log(b); //输出ReferenceError: b is not defined

在这个例子中，let声明的变量a只能在声明它的代码块内访问，一旦离开这个代码块，变量a就无法再被访问。const声明的变量b也是如此。

块级作用域

块级作用域是指变量的作用范围只限于声明它们的代码块内。在JavaScript中，代码块包括函数体、循环体和条件语句体。

function example() {
    let a = 10;
    {
        let b = 20;
        console.log(a); //输出10
        console.log(b); //输出20
    }
    console.log(a); //输出10
    console.log(b); //输出ReferenceError: b is not defined
}
example();