JavaScript 作用域（Scope）详解

曾经终败给现在 2021-11-14 15:14 279阅读 0赞

先对需要用到的名词解释一下，再通过例子深入理解

### 一、什么是作用域（Scope） ###

\[\[scope\]\]:每个javascript函数都是一个对象，对象中有些属性我们可以访问，但有些不可以，这些属性仅供javascript引擎存取，\[\[scope\]\]就是其中一个。\[\[scope\]\]指的就是我们所说的作用域,其中存储了运行期上下文的集合。即作用域决定了代码区块中变量和其他资源的可见性。

### 二、变量的作用域类型 ###

1.全局作用域：全局作用域贯穿整个javascript文档，在所有函数声明或者大括号之外定义的变量，都在全局作用域里。一旦你声明了一个全局变量，那么你在任何地方都可以使用它，包括函数内部。

2.局部作用域：局部作用域一般只在固定的代码片段内可访问到，而其外部是无法访问的，它分为函数作用域和块级作用域

a：函数作用域： 当你在函数里定义一个变量时，它在函数内任何地方都可以使用。在函数之外，你就无法访问它了。

b：块级作用域：你在使用大括号时，声明了一个`const`或者`let`的变量时，你就只能在大括号内部使用这一变量。

### 三、作用域链 ###

作用域链：\[\[scope\]\]中所存储的执行期上下文对象的集合，这个集合呈链式链接，我们把这种链式链接叫做作用域链。

### 四、执行期上下文 ###

当函数执行时，会创建一个称为执行期上下文的内部对象。一个执行期上下文定义了一个函数执行时的环境，函数每次执行时对应的执行上下文都是独一无二的，所以多次调用一个函数会导致创建多个执行上下文，当函数执行完毕，执行上下文被销毁。（即AO、GO，不了解的可参考预预编译文章）

### 五、查找变量 ###

在函数中查找变量，从其作用域链的顶端依次向下查找，从Scope chain 的0位依次查到最后一位。

通过一个例子具体了解上面的定义：

\+   ?

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;script&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>function</code> 
      <code>a() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>function</code> 
      <code>b() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>bb = 234</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>aa = 123;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>b();</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>glob = 100;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>a();</code> 
     </div> 
     <div> 
      <code>&lt;/script&gt;</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

1.a()定义时，其Scope里存放GO

![1544400-20181209151300297-1380603849.png][]

2.a()执行时，形成作用域链，Scope chain\[0\] 存放AO， Scope chain\[1\] 存放GO

![1544400-20181209151350367-1408518238.png][]

3： b()定义，因为它是a()内部的函数，因此其执行期上下文与a()执行时是一样的；

![1544400-20181209151433329-600177127.png][]

4：b()执行时，产生自己的AO，在作用域链中将a()的AO与GO储存位置下移，第0位存自己的AO

![1544400-20181209151528367-1533349752.png][]

注意：b()  Scope chain 储存的a() 的AO与a()中的AO一样，只是将其引用挂到里面，即通过b()中可以改变a()中变量的值

例：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;script&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>function</code> 
      <code>a() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>function</code> 
      <code>b() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>bb = 234</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>aa = 0；</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>aa = 123;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>b();&lt;br&gt;　　　　　console.log(a);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>glob = 100;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>a();</code> 
     </div> 
     <div> 
      <code>&lt;/script&gt;</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

输出a的值为 0

[1544400-20181209151300297-1380603849.png]: /images/20211114/d772a033faa547a9afb68e60140cf95d.png
[1544400-20181209151350367-1408518238.png]: /images/20211114/46475594cecd4692ba638c96a0b55710.png
[1544400-20181209151433329-600177127.png]: /images/20211114/ef7ca2b8102a442eb6cc77d3a02f3111.png
[1544400-20181209151528367-1533349752.png]: /images/20211114/ded3e09682bf41c4adcea4104ac3341b.png