js中作用域链 代码实例

下面是一个示例代码，演示了作用域链的工作原理：

function outerFunction() {
  var outerVar = 'Outer Variable';

  function innerFunction() {
    var innerVar = 'Inner Variable';
    console.log(innerVar); // 可以访问内部变量
    console.log(outerVar); // 可以访问外部变量
  }

  innerFunction();
}

outerFunction();

在这个例子中，有两个函数：`outerFunction` 和 `innerFunction`。`innerFunction` 是在 `outerFunction` 内部定义的。

当调用 `outerFunction` 时，它创建了一个作用域，并将 `outerVar` 变量添加到该作用域中。然后，在 `outerFunction` 内部调用 `innerFunction`，它创建了一个新的作用域，并将 `innerVar` 变量添加到其中。

当在 `innerFunction` 内部访问变量时，JavaScript 引擎首先在当前作用域中查找，即 `innerFunction` 的作用域。如果变量未找到，它会继续向上一级作用域，即 `outerFunction` 的作用域，直到找到变量或者搜索到全局作用域。

因此，在这个例子中，`innerFunction` 可以访问并打印出 `innerVar` 和 `outerVar` 变量的值，因为它们都在作用域链中可见。但是，如果在 `outerFunction` 外部尝试访问这些变量，将会出现错误，因为它们不在当前作用域链中可见。

这个例子展示了作用域链的嵌套关系和变量访问的范围。