JavaScript 作用域与作用域链：一杯茶的明悟

前端

2024-02-22 11:46:41

一盏茶的功夫，透彻拿捏 JavaScript 作用域和作用域链

在我们开始技术之旅之前，不妨泡上一壶热茶，细细品味 JavaScript 作用域和作用域链的微妙之处，以获取对代码行为的更深刻理解。

JavaScript 作用域：一杯变量的狂欢

作用域定义了变量或函数可访问的区域。JavaScript 采用词法作用域，这意味着变量在代码中声明的位置决定了它们的可见性。

全局作用域： 在全局对象（通常是 window）中定义的变量在整个程序中都可以访问。
函数作用域： 在函数内部定义的变量仅在该函数及其嵌套函数中可见。

JavaScript 作用域链：寻找变量的寻宝之旅

作用域链是一条作用域链，它将当前作用域连接到其所有父作用域。当 JavaScript 尝试查找变量时，它会沿着作用域链逐级查找，直到找到它或到达全局作用域。

变量提升： 在 JavaScript 中，变量声明会被提升到其所在作用域的顶部，即使它们实际是在代码中后面声明的。
块级作用域（ES6）： let 和 const 创建块级作用域，其中的变量仅在声明的代码块内可见。

用代码举例：品味作用域的奥秘

var x = 10; // 全局作用域

function myFunction() {
  var y = 20; // 函数作用域

  if (true) {
    let z = 30; // 块级作用域
  }

  console.log(x); // 输出: 10
  console.log(y); // 输出: 20
  console.log(z); // ReferenceError: z is not defined
}

myFunction();