浅析 JS 中的作用域链

时间：2024-03-25 12:04:08

作用域链的形成

在 JS 中每个函数都有自己的执行环境，而每个执行环境都有一个与之对应的变量对象。例如：

var a = 2

function fn () {

  var a = 1

  console.log(a)

}

fn() // 输出 1

你就可以将 fn 当做函数 fn 执行环境对应的一个变量对象，这个变量对象我们通过代码是无法访问到的，但是 JS

引擎在解析代码时会用到它。

思考为什么上面函数中的 fn 运行后输出 1，可能大家都知道，但是为什么会输出 1 呢，用上面的变量对象来理解就可以得出答案。实际上:

console.log(a)

// 等价于

console.log(fn.a)

这个 fn 就是函数 fn 对应的变量对象，我们通过代码没有办法得到它，但是 JS 引擎可以，并且利用它找了变量 a。

现在再来思考下面这一种情况:

var a = 3

function fn1() {

  var a = 2

  function fn2() {

    console.log(a)

  }

  fn2()

}

fn1() // 输出 2

为什么输出 2 而不是 3 呢？

这就引出了作用域链，函数 fn2 对应的变量对象时是 fn2，函数 fn1 对应的变量对象是 fn1，全局执行环境对应的变量对象是 window 对象。当代码中的变量 a 在 fn2 中找不到时就不会去它的父环境 fn1 对应的变量对象 fn1 中去查找，发现有 a 变量就使用它。

实际上这个查找的过程就是沿着作用域链查找的过程。

当一个函数被执行时，就会创建一条由变量对象（函数执行时也叫活动对象）组成的作用域链，作用域链的前端就是当前代码执行所在环境对应的变量对象（即 fn2），下一个变量对象来自父环境对应的变量对象（即 fn1），一直到全局执行环境的变量对象 window。

因此，上面代码中的作用域链就是 fn1 -> fn2 -> window，查找标识符的顺序就是顺着作用域链从最前端开始依次向后查找，在某个变量对象中找到后就停止往后查找。

延长作用域链

既然我们知道作用域链的前端就是当前运行环境所在的变量对象，那么能不能人为地改变作用域链前端的变量对象呢？

答案是肯定的。

1）利用 try-catch 语句块中的 catch

catch 语句块中会创建一个新的变量对象，并且处于作用域链的最前端，其中包含的是被抛出的错误对象的声明。

2）with 语句

对于 with 语句来说会将指定的对象添加到作用域链的最前端。

相关文章