前端JavaScript篇之对作用域、作用域链的理解

---

对作用域、作用域链的理解

1）全局作用域和函数作用域
全局作用域是在整个代码中都可以访问的作用域。在全局作用域中声明的变量和函数可以在代码的任何位置被访问。

var globalVariable = 'Global'

function foo() {
  console.log(globalVariable) // 可以访问全局变量
}

foo() // 输出 'Global'
console.log(globalVariable) // 可以在全局范围内访问全局变量

函数作用域是在函数内部声明的变量拥有的作用域。函数作用域只能在函数内部被访问，外部作用域无法直接访问函数内部的变量。

function foo() {
  var x = 10 // x 是函数作用域内的变量
  console.log(x)
}

foo() // 输出 10
console.log(x) // ReferenceError: x is not defined，x 在函数外部不可访问

2）块级作用域
在 ES6 中，使用 let 和 const 关键字可以创建块级作用域。块级作用域可以在函数内部或由一对花括号 {} 包裹的代码块中创建。

function foo() {
  if (true) {
    let x = 10 // x 是块级作用域内的变量
    const y = 20 // y 是块级作用域内的常量
    console.log(x, y)
  }

  console.log(x) // ReferenceError: x is not defined，x 不在块级作用域外可访问
  console.log(y) // ReferenceError: y is not defined，y 不在块级作用域外可访问
}

foo()

在上例中，变量 x 和常量 y 的作用域仅限于 if 语句块内部，外部作用域无法直接访问。

3）作用域链
作用域链是一种查找变量的机制，它是由多个作用域形成的链式结构。当访问一个变量时，JavaScript 引擎会按照作用域链的顺序从当前作用域开始向外层作用域逐级搜索，直到找到匹配的标识符或到达全局作用域。

var x = 10 // 全局变量

function outer() {
  var y = 20 // outer 函数作用域内的变量

  function inner() {
    var z = 30 // inner 函数作用域内的变量
    console.log(x + y + z)
  }

  inner()
}

outer() // 输出 60

在上例中，当执行 inner() 函数时，JavaScript 引擎首先在 inner 函数作用域中查找变量 z，如果找不到，则继续向上层作用域链中的 outer 函数作用域查找变量 y，最后在全局作用域中查找变量 x，从而获取到变量的值并输出结果。

当涉及作用域、作用域链和块级作用域时，有几个要注意的关键点：

1. 全局作用域是整个代码中都可访问的作用域，函数作用域是在函数内部声明的变量所拥有的作用域。
2. 块级作用域可以使用let和const关键字在函数内部或由一对花括号 {} 包裹的代码块中创建。
3. 块级作用域中声明的变量在该代码块内部可见，外部作用域无法直接访问。
4. 作用域链是一个按照嵌套层次结构查找变量的链式结构。
5. 当在一个作用域中访问一个变量时，JavaScript 引擎首先搜索当前作用域，然后按照作用域链逐级向上搜索，直到找到匹配的标识符或到达全局作用域。
6. 作用域链的顶端始终是当前执行环境的变量对象，其中包含当前作用域中定义的变量和函数。
7. 函数作用域和块级作用域可以帮助我们限制变量的作用范围，避免变量的命名冲突和污染全局命名空间的问题。

综上所述，作用域和作用域链是 JavaScript 中重要的概念。全局作用域、函数作用域和块级作用域分别提供不同的变量访问范围。作用域链保证了在嵌套的作用域结构中顺序访问变量。块级作用域的引入增加了代码的可读性和维护性，并减少了命名冲突的可能性。

请注意，在使用 let 和 const 声明变量时，要注意变量的生命周期和作用域。变量的生命周期受限于它们所在的作用域，当超出作用域时，变量会被垃圾回收机制回收。此外，避免滥用全局变量，以减少命名冲突和全局命名空间的污染。

持续学习总结记录中，回顾一下上面的内容：
作用域是指变量和函数在代码中的可访问范围。就像人们住在不同的房间，变量和函数也有不同的“住所”。当你在一个地方查找变量或函数时，JavaScript 会按照一定规则搜索变量所在的作用域，这个搜索顺序就是作用域链。
想象一下你住在一栋大楼里，每一层都有房间。当你在当前层的一个房间里寻找某个东西时，首先你会在这个房间里找，如果找不到，你会去当前层的其他房间找。如果还找不到，你会上一层继续找，直到找到或者到达最顶层。这个搜索的过程就是作用域链。
作用域链是一个保存了所有嵌套作用域的链式结构。它决定了变量在代码中的可见性。当你在某个地方使用一个变量时，JavaScript 引擎会根据作用域链逐级向上查找，直到找到该变量。如果找不到，就会报错。
作用域和作用域链的概念很重要，因为它们决定了变量在代码中的可访问范围。了解作用域链能够帮助你避免命名冲突、理解变量的生命周期，并更好地理解 JavaScript 代码的执行过程。总的来说，作用域和作用域链可以用来描述变量和函数在代码中的“居住”位置以及它们的可见性。