深度剖析JavaScript作用域从局部到全局一网打尽

什么是作用域

作用域是指一个变量、函数、对象可以被访问的范围。在JavaScript中，作用域有两种：全局作用域和局部作用域。

全局作用域是指在代码的任何地方都能访问的变量、函数、对象，通常是在顶层定义的。而局部作用域则是指只能在一个函数内部访问的变量、函数、对象。

作用域链

当在JavaScript中访问一个变量时，运行时会按照以下顺序查找变量：

首先查找当前作用域内是否存在该变量。
如果不存在，则向上一级作用域查找。
如果还不存在，则继续向上查找，直到找到全局作用域。

这个查找的过程被称为作用域链。作用域链的顶端是全局作用域，底部是当前执行环境的变量对象。

闭包

在JavaScript中，函数内部可以访问外部作用域的变量，这种情况被称为闭包。闭包是指在父函数执行完毕后，内部函数仍然可以访问父函数变量的现象。

示例1：作用域链

let globalVariable = "global variable";

function foo() {
  let outerVariable = "outer variable";

  function bar() {
    let innerVariable = "inner variable";
    console.log(innerVariable);
    console.log(outerVariable);
    console.log(globalVariable);
  }

  bar();
}

foo();

上述代码中，当调用foo()函数时，会生成一个新的执行环境，并按照作用域链查找内部的变量。因此，调用bar()函数时可以访问到innerVariable、outerVariable和globalVariable变量。

示例2：闭包

function outerFunction() {
  let outerVariable = "outer variable";

  return function innerFunction() {
    console.log(outerVariable);
  }
}

let innerFn = outerFunction();
innerFn(); // 输出 "outer variable"

上述代码中，定义了一个outerFunction函数并返回一个内部函数innerFunction。当调用outerFunction函数时，生成一个新的执行环境，并将outerVariable变量存储在该执行环境中。但是，由于innerFunction函数是在outerFunction函数内部定义的，因此可以访问到outerVariable变量。当返回innerFunction函数时，outerFunction执行环境被销毁，但是innerFunction仍然可以访问outerVariable变量，这就是闭包的概念。