Javascript中的作用域问题详解

桃扇骨 2022-03-02 01:08 288阅读 0赞

## 一、前言 ##

在javascirpt中的作用域一直是一个比较困扰人又比较奇怪的问题，接下来笔者就javascript作用域问题进行一个详细的解释跟说明。

## 二、Javascript中的作用域 ##

在javascript中只有两种作用域：全局作用域跟局部（函数）作用域。而像while/for/if这些语言结构是没有自己的作用域的，也就是说在它们体内声明的变量都是全局变量。接下来笔者用实例来说明：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70]  
**1、if/for/while等语言结构没有自己的作用域**

我们首先声明了一个变量a，随后在if判断语句中又重新声明了一个变量a，而且if判断语句中的变量声明是带`var`的。我们知道，如果是在局部作用域中，用`var`声明变量说明这个变量是局部变量。我们来看一下在控制台的输入结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 1]  
发现a的值发生了改变，这说明在if是没有自己的作用域的。

接下来我们看一下函数作用域。

**2、函数作用域**

我们在上面的代码中加入一个函数，并在该函数中声明同名变量：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 2]  
此时看一下控制台的输出：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 3]  
可以看到输出结果仍为2，函数中的声明并没有改变a的值，说明函数是有自己的作用域的。

如果我们将函数声明中的`var`给去掉呢？像这样：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 4]  
此时我们再来看一下控制台的输出：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 5]  
可以看到此时控制台的输出已经发生了变化。这说明即使是在函数中声明的变量，如果不带`var`关键字进行声明的话，其声明的变量也是全局变量。

还有一点特别有趣的就是：其实在javascript中，所有的全局变量都是window对象的属性。我们继续以上面的例子来验证一下。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 6]  
此时控制台的输出为：  
![在这里插入图片描述][20190319123445874.png]  
可以看到`console.log(window.a)`输出为变量a的值，而`consloe.log(window.b)`显示未定义，这是因为b是在函数中用关键字`var`定义的，为局部变量，因此不是window对象的属性。

## 三、总结 ##

javascritp中的作用域只有两种，全局跟局部，其中全局变量其实是window对象的属性，而局部作用域只有在函数中用关键字`var`声明才生效。因此为了避免作用域的问题，声明变量时最好加上`var`关键字，它在全局作用域中声明的变量仍为全局变量，而在局部作用域中声明的变量为局部变量。。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70]: /images/20220302/d4355d47e6f942d49f1a3a1405811ebe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 1]: /images/20220302/3dbb6815a08e4c3d9c21fd362c3dffdf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 2]: /images/20220302/44bcb4c09e114813b0662ec19a887126.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 3]: /images/20220302/f8194854d2ed4e9fadf84ebf81c7276d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 4]: /images/20220302/dbebdf7880a94d57bbedb91555b68c3c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 5]: /images/20220302/d0d3f3ab59e14f1a92a00242cd0c08e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 6]: /images/20220302/84a628e2f5ab4c669d3045b926765cd2.png
[20190319123445874.png]: /images/20220302/f5783cf2dcad4b6b9efdad7f28d64148.png