详解JavaScript作用域、作用域链和闭包的用法

水深无声 2022-10-22 12:00 328阅读 0赞

**作用域**

JavaScript的作用域限定了你可以访问哪些变量。有两种作用域：全局作用域，局部作用域。

**全局作用域**

在所有函数声明或者大括号之外定义的变量，都在全局作用域里。

不过这个规则只在浏览器中运行的JavaScript里有效。如果你在Node.js里，那么全局作用域里的变量就不一样了，不过这篇文章不讨论Node.js。

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>`const globalVariable = </code><code>'some value'</code><code>`</code> </td> 
 </tr> 
 </tbody> 
</table>

一旦你声明了一个全局变量，那么你在任何地方都可以使用它，包括函数内部。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>const hello = </code><code>'Hello CSS-Tricks Reader!'</code> &nbsp; <code>function</code> <code>sayHello () { </code> <code>&nbsp;</code><code>console.log(hello)</code> <code>}</code> &nbsp; <code>console.log(hello) </code><code>// 'Hello CSS-Tricks Reader!'</code> <code>sayHello() </code><code>// 'Hello CSS-Tricks Reader!'</code> </td> 
 </tr> 
 </tbody> 
</table>

尽管你可以在全局作用域定义变量，但我们并不推荐这样做。因为可能会引起命名冲突，两个或更多的变量使用相同的变量名。如果你在定义变量时使用了`const`或者`let`，那么在命名有冲突时，你就会收到错误提示。这是不可取的。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>// Don't do this!</code> <code>let thing = 'something</code><code>'</code> <code>let thing = '</code><code>something </code><code>else</code><code>' </code><code>// Error, thing has already been declared</code> </td> 
 </tr> 
 </tbody> 
</table>

如果你定义变量时使用的是`var`，那第二次定义会覆盖第一次定义。这也会让代码更难调试，也是不可取的。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>// Don't do this!</code> <code>var</code> <code>thing = 'something</code><code>'</code> <code>var thing = '</code><code>something </code><code>else</code><code>' // perhaps somewhere totally different in your code</code> <code>console.log(thing) // '</code><code>something </code><code>else</code><code>'</code> </td> 
 </tr> 
 </tbody> 
</table>

所以，你应该尽量使用局部变量，而不是全局变量

**局部作用域**

在你代码某一个具体范围内使用的变量都可以在局部作用域内定义。这就是局部变量。

JavaScript里有两种局部作用域：函数作用域和块级作用域。

我们从函数作用域开始。

**函数作用域**

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

比如下面这个例子，在`sayHello`函数内的`hello`变量：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>function</code> <code>sayHello () { </code> <code>&nbsp;</code><code>const hello = </code><code>'Hello CSS-Tricks Reader!'</code> <code>&nbsp;</code><code>console.log(hello)</code> <code>}</code> &nbsp; <code>sayHello() </code><code>// 'Hello CSS-Tricks Reader!'</code> <code>console.log(hello) </code><code>// Error, hello is not defined</code> </td> 
 </tr> 
 </tbody> 
</table>

**块级作用域**

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

在下例中，`hello`只能在大括号内使用。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>{ </code> <code>&nbsp;</code><code>const hello = </code><code>'Hello CSS-Tricks Reader!'</code> <code>&nbsp;</code><code>console.log(hello) </code><code>// 'Hello CSS-Tricks Reader!'</code> <code>}</code> &nbsp; <code>console.log(hello) </code><code>// Error, hello is not defined</code> </td> 
 </tr> 
 </tbody> 
</table>

块级作用域是函数作用域的子集，因为函数是需要用大括号定义的，（除非你明确使用return语句和箭头函数）。

函数提升和作用域

当使用function定义时，这个函数都会被提升到当前作用域的顶部。因此，下面的代码是等效的：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> <code>// This is the same as the one below</code> <code>sayHello()</code> <code>function</code> <code>sayHello () { </code> <code>&nbsp;</code><code>console.log(</code><code>'Hello CSS-Tricks Reader!'</code><code>)</code> <code>}</code> &nbsp; <code>// This is the same as the code above</code> <code>function</code> <code>sayHello () { </code> <code>&nbsp;</code><code>console.log(</code><code>'Hello CSS-Tricks Reader!'</code><code>)</code> <code>}</code> <code>sayHello()</code> </td> 
 </tr> 
 </tbody> 
</table>

使用函数表达式定义时，函数就不会被提升到变量作用域的顶部。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>sayHello() </code><code>// Error, sayHello is not defined</code> <code>const sayHello = </code><code>function</code> <code>() { </code> <code>&nbsp;</code><code>console.log(aFunction)</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

因为这里有两个变量，函数提升可能会导致混乱，因此就不会生效。所以一定要在使用函数之前定义函数。

**函数不能访问其他函数的作用域**

在分别定义的不同的函数时，虽然可以在一个函数里调用一个函数，但一个函数依然不能访问其他函数的作用域内部。

下面这例，`second`就不能访问`firstFunctionVariable`这一变量。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>function</code> <code>first () { </code> <code>&nbsp;</code><code>const firstFunctionVariable = `I'm part of first`</code> <code>}</code> &nbsp; <code>function</code> <code>second () { </code> <code>&nbsp;</code><code>first()</code> <code>&nbsp;</code><code>console.log(firstFunctionVariable) </code><code>// Error, firstFunctionVariable is not defined</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**嵌套作用域**

如果在函数内部又定义了函数，那么内层函数可以访问外层函数的变量，但反过来则不行。这样的效果就是词法作用域。

外层函数并不能访问内部函数的变量。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 </td> 
 <td> <code>function</code> <code>outerFunction () { </code> <code>&nbsp;</code><code>const outer = `I</code><code>'m the outer function!`</code> &nbsp; <code>&nbsp;</code><code>function innerFunction() { </code> <code>&nbsp;&nbsp;</code><code>const inner = `I'</code><code>m the inner </code><code>function</code><code>!`</code> <code>&nbsp;&nbsp;</code><code>console.log(outer) </code><code>// I'm the outer function!</code> <code>&nbsp;</code><code>}</code> &nbsp; <code>&nbsp;</code><code>console.log(inner) </code><code>// Error, inner is not defined</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

如果把作用域的机制可视化，你可以想象有一个双向镜（单面透视玻璃）。你能从里面看到外面，但是外面的人不能看到你。

![a0af13595dbc19d155297d9372b53474.png][]

函数作用域就像是双向镜一样。你可以从里面向外看，但是外面看不到你。

嵌套的作用域也是相似的机制，只是相当于有更多的双向镜。

![d90619e3e1c2a403df873c266e28f4fa.png][]

多层函数就意味着多个双向镜。

理解前面关于作用域的部分，你就能理解闭包是什么了。

**闭包**

你在一个函数内新建另一个函数时，就相当于创建了一个闭包。内层函数就是闭包。通常情况下，为了能够使得外部函数的内部变量可以访问，一般都会返回这个闭包。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> <code>function</code> <code>outerFunction () { </code> <code>&nbsp;</code><code>const outer = `I see the outer variable!`</code> &nbsp; <code>&nbsp;</code><code>function</code> <code>innerFunction() { </code> <code>&nbsp;&nbsp;</code><code>console.log(outer)</code> <code>&nbsp;</code><code>}</code> &nbsp; <code>&nbsp;</code><code>return</code> <code>innerFunction</code> <code>}</code> &nbsp; <code>outerFunction()() </code><code>// I see the outer variable!</code> </td> 
 </tr> 
 </tbody> 
</table>

因为内部函数是返回值，因此你可以简化函数声明的部分：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 </td> 
 <td> <code>function</code> <code>outerFunction () { </code> <code>&nbsp;</code><code>const outer = `I see the outer variable!`</code> &nbsp; <code>&nbsp;</code><code>return</code> <code>function</code> <code>innerFunction() { </code> <code>&nbsp;&nbsp;</code><code>console.log(outer)</code> <code>&nbsp;</code><code>}</code> <code>}</code> &nbsp; <code>outerFunction()() </code><code>// I see the outer variable!</code> </td> 
 </tr> 
 </tbody> 
</table>

因为闭包可以访问外层函数的变量，因此他们通常有两种用途：

1.  减少副作用
2.  创建私有变量

**使用闭包控制副作用**

当你在函数返回值时执行某些操作时，通常会发生一些副作用。副作用在很多情况下都会发生，比如Ajax调用，超时处理，或者哪怕是`console.log`的输出语句：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>function</code> <code>(x) { </code> <code>&nbsp;</code><code>console.log(</code><code>'A console.log is a side effect!'</code><code>)</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

当你使用闭包来控制副作用时，你实际上是需要考虑哪些可能会混淆代码工作流程的部分，比如Ajax或者超时。

要把事情说清楚，还是看例子比较方便：

比如说你要给为你朋友庆生，做一个蛋糕。做这个蛋糕可能花1秒钟的时间，所以你写了一个函数记录在一秒钟以后，记录做完蛋糕这件事。

为了让代码简短易读，我使用了ES6的箭头函数：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>function</code> <code>makeCake() { </code> <code>&nbsp;</code><code>setTimeout(_ =&gt; console.log(`Made a cake`, 1000)</code> <code>&nbsp;</code><code>)</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

如你所见，做蛋糕带来了一个副作用：一次延时。

更进一步，比如说你想让你的朋友能选择蛋糕的口味。那么你就给做蛋糕`makeCake`这个函数加了一个参数。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>function</code> <code>makeCake(flavor) { </code> <code>&nbsp;</code><code>setTimeout(_ =&gt; console.log(`Made a ${flavor} cake!`, 1000))</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

因此当你调用这个函数时，一秒后这个新口味的蛋糕就做好了。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>makeCake(</code><code>'banana'</code><code>)</code> <code>// Made a banana cake!</code> </td> 
 </tr> 
 </tbody> 
</table>

但这里的问题是，你并不想立刻知道蛋糕的味道。你只需要知道时间到了，蛋糕做好了就行。

要解决这个问题，你可以写一个`prepareCake`的功能，保存蛋糕的口味。然后，在返回在内部调用`prepareCake`的闭包`makeCake`。

从这里开始，你就可以在你需要的时调用，蛋糕也会在一秒后立刻做好。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> <code>function</code> <code>prepareCake (flavor) { </code> <code>&nbsp;</code><code>return</code> <code>function</code> <code>() { </code> <code>&nbsp;&nbsp;</code><code>setTimeout(_ =&gt; console.log(`Made a ${flavor} cake!`, 1000))</code> <code>&nbsp;</code><code>}</code> <code>}</code> &nbsp; <code>const makeCakeLater = prepareCake(</code><code>'banana'</code><code>)</code> &nbsp; <code>// And later in your code...</code> <code>makeCakeLater()</code> <code>// Made a banana cake!</code> </td> 
 </tr> 
 </tbody> 
</table>

这就是使用闭包减少副作用：你可以创建一个任你驱使的内层闭包。

**私有变量和闭包**

前面已经说过，函数内的变量，在函数外部是不能访问的既然不能访问，那么它们就可以称作私有变量。

然而，有时候你确实是需要访问私有变量的。这时候就需要闭包的帮助了。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> <code>function</code> <code>secret (secretCode) { </code> <code>&nbsp;</code><code>return</code> <code>{ </code> <code>&nbsp;&nbsp;</code><code>saySecretCode () { </code> <code>&nbsp;&nbsp;&nbsp;</code><code>console.log(secretCode)</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;</code><code>}</code> <code>}</code> &nbsp; <code>const theSecret = secret(</code><code>'CSS Tricks is amazing'</code><code>)</code> <code>theSecret.saySecretCode()</code> <code>// 'CSS Tricks is amazing'</code> </td> 
 </tr> 
 </tbody> 
</table>

这个例子里的`saySecretCode`函数，就在原函数外暴露了`secretCode`这一变量。因此，它也被成为特权函数。

**使用DevTools调试**

Chrome和Firefox的开发者工具都使我们能很方便的调试在当前作用域内可以访问的各种变量一般有两种方法。

第一种方法是在代码里使用`debugger`关键词。这能让浏览器里运行的JavaScript的暂停，以便调试。

下面是`prepareCake`的例子：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 </td> 
 <td> <code>function</code> <code>prepareCake (flavor) { </code> <code>&nbsp;</code><code>// Adding debugger</code> <code>&nbsp;</code><code>debugger</code> <code>&nbsp;</code><code>return</code> <code>function</code> <code>() { </code> <code>&nbsp;&nbsp;</code><code>setTimeout(_ =&gt; console.log(`Made a ${flavor} cake!`, 1000))</code> <code>&nbsp;</code><code>}</code> <code>}</code> &nbsp; <code>const makeCakeLater = prepareCake(</code><code>'banana'</code><code>)</code> </td> 
 </tr> 
 </tbody> 
</table>

打开Chrome的开发者工具，定位到Source页下（或者是Firefox的Debugger页），你就能看到可以访问的变量了。

![859851dda2d416af42707a8ea0beec83.png][]

使用debugger调试`prepareCake`的作用域。

你也可以把`debugger`关键词放在闭包内部。注意对比变量的作用域：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 </td> 
 <td> <code>function</code> <code>prepareCake (flavor) { </code> <code>&nbsp;</code><code>return</code> <code>function</code> <code>() { </code> <code>&nbsp;&nbsp;</code><code>// Adding debugger</code> <code>&nbsp;&nbsp;</code><code>debugger</code> <code>&nbsp;&nbsp;</code><code>setTimeout(_ =&gt; console.log(`Made a ${flavor} cake!`, 1000))</code> <code>&nbsp;</code><code>}</code> <code>}</code> &nbsp; <code>const makeCakeLater = prepareCake(</code><code>'banana'</code><code>)</code> </td> 
 </tr> 
 </tbody> 
</table>

![a3dded6637da2e2a1c45aa1bb847f88e.png][]

调试闭包内部作用域

第二种方式是直接在代码相应位置加断点，点击对应的行数就可以了。

![7f688fb54f083ca40e970a8999c0b67c.png][]

通过断点调试作用域

**总结一下**

闭包和作用域并不是那么难懂。一旦你使用双向镜的思维去理解，它们就非常简单了。

当你在函数里声明一个变量时，你只能在函数内访问。这些变量的作用域就被限制在函数里了。

如果你在一个函数内又定义了内部函数，那么这个内部函数就被称作闭包。它仍可以访问外部函数的作用域。

[a0af13595dbc19d155297d9372b53474.png]: /images/20221022/594b349cf12d4f81b8e250cf828e4285.png
[d90619e3e1c2a403df873c266e28f4fa.png]: /images/20221022/5e01a6b3e91a4426bf84556a041aeb5b.png
[859851dda2d416af42707a8ea0beec83.png]: /images/20221022/f3fe215604064ef9b03dfdbce781fec2.png
[a3dded6637da2e2a1c45aa1bb847f88e.png]: /images/20221022/e883dec152d94fdf8421f58b2e18cf11.png
[7f688fb54f083ca40e970a8999c0b67c.png]: /images/20221022/f99d73bc128946d3a610e8f976c02673.png