作用域与作用域链

前端

2023-11-01 20:35:55

在上一篇文章《新手秒懂 - 高逼格解释变量提升》中，我们提到在生成执行上下文的创建阶段，生成变量对象后会建立作用域链。那么作用域和作用域链到底是什么呢？

作用域

作用域是一套规则，用于确定在何处以及如何查找变量（标识符）。简单来说，作用域就是你写代码的区域，这个区域决定了变量的可见性。

在 JavaScript 中，作用域有两种类型：

全局作用域：这是程序中最外层的代码块，可以访问全局变量和函数。
局部作用域：这是函数或代码块内部的代码块，可以访问局部变量和函数。

全局变量和函数在程序的任何地方都可以访问，而局部变量和函数只能在定义它们的代码块内部访问。

作用域链

作用域链是变量查找的路径。当 JavaScript 引擎在执行代码时，它会从当前执行环境的局部作用域开始搜索变量，如果在局部作用域中没有找到，它就会沿着作用域链向上搜索，直到找到该变量或到达全局作用域。

作用域链的建立顺序与执行环境的创建顺序相同，因此，作用域链的顶部是当前执行环境的局部作用域，然后是该执行环境的父执行环境的局部作用域，依此类推，直到到达全局执行环境。

作用域链的存在确保了在 JavaScript 中，变量的查找是安全的。如果在一个局部作用域中找不到某个变量，它就会沿着作用域链向上搜索，直到找到该变量或到达全局作用域。

作用域和作用域链示例

以下代码演示了作用域和作用域链的概念：

var globalVariable = 10;

function outerFunction() {
  var outerVariable = 20;

  function innerFunction() {
    var innerVariable = 30;

    console.log(globalVariable); // 10
    console.log(outerVariable); // 20
    console.log(innerVariable); // 30
  }

  innerFunction();
}

outerFunction();

在这个示例中，全局变量 globalVariable 在程序的任何地方都可以访问。函数 outerFunction() 和 innerFunction() 定义了局部作用域。变量 outerVariable 只在 outerFunction() 内部可以访问，变量 innerVariable 只在 innerFunction() 内部可以访问。

当 innerFunction() 执行时，它会先在自己的局部作用域中查找变量 globalVariable、outerVariable 和 innerVariable。它会找到 innerVariable，但找不到 globalVariable 和 outerVariable。因此，它会沿着作用域链向上搜索，直到找到 globalVariable 和 outerVariable。