JavaScript作用域链详细介绍

JavaScript中还有一个很重要的概念叫作用域以及绘制作用域链 ，下面我来进行讲解一下。

首先，要先理解，在其他开发语言中，常见的作用域规则：块级作用域和 词法作用域。

然而什么叫作用域？ 即 起作用的区域 ；定义变量后，可以在哪一个范围内使用该变量。

块级作用域

所谓的块级作用域就是用一个块结构分割变量的访问区域 即 { } 直接包围的区域。代表语言：c（c 系类）。

词法作用域

词法作用域就是变量的作用范围，在书写代码的时候就已经决定，与运行时无关 ，另外，js中分割作用域的只有函数；

还有，浏览器在预解析下，有两个重要的特点：① 声明会提升 ②只有函数才会限定作用域。

有了以上的概念，下面就开始讲绘制作用域链的规则：

1> 将全部的 script 标签看做一个整体. 是一个 0 级别的链；

把全局范围内的变量, 函数, 对象... 归为链中的成员，用一个小框表示出来；

由于函数声明和变量定义在浏览器预解析阶段会提升, 因此可在绘制链之前将代码进行调整，将声明都写在前面, 这样绘图的时候按照顺序绘制, 将会简化作用域链的难度。

2> 由于只有函数才可以限定作用域. 因此在函数上引出一条新链,级别为 n + 1；

在函数内部, 又是一个完整, 独立的作用域结构；

因此在函数内部定义的任何成员也按照 1> 中的规则在该链上展开。

3> 如果函数内还有函数, 将继续绘制下去，即可。

由此可以得出变量搜索原则：

在代码的运行过程中, 如果访问某一个变量；

那么首先在当前链上找 ( 无序 ), 如果没有, 在 n-1 级上找；

( 在函数内部允许访问定义在函数外部的变量 )；

如此往复, 直到 0 级链, 如果还没有就抛出异常；

如果找到, 则结束寻找, 直接获得并返回该链上变量的数据。

另附上一张作用域链图。由此我们就可以按照上面规则画出类似下图的作用域链：



By Turbo beijing