JavaScript中局部变量与全局变量

蔚落 2022-02-09 12:25 498阅读 0赞

我们知道，JavaScript的变量是松散型的变量，也就是说，其变量只需用var声明，其赋值的类型是不限定的。比如：

<table style="font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;font-size:16px;border-collapse:collapse;color:rgb(51,51,51);"> 
 <tbody style="border:0px;line-height:1.1em;vertical-align:baseline;background:none;"> 
  <tr style="border:0px;line-height:1.1em;vertical-align:baseline;background:none;"> 
   <td style="background:none;border:1px solid rgb(192,192,192);border-collapse:collapse;line-height:1.1em;vertical-align:baseline;color:rgb(175,175,175);"> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> </td> 
   <td style="background:none;border:1px solid rgb(192,192,192);border-collapse:collapse;line-height:1.1em;vertical-align:baseline;"> 
    <div>
      var&nbsp;person=18; 
    </div> 
    <div>
      person="zhuzhenwei"; 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

即先给person保存了一个number类型的值，之后还可以保存一个string类型的值，但是，这种做法是不推荐的。

甚至我们都可以直接给一个变量赋值，而不需要声明。比如：

<table style="font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;font-size:16px;border-collapse:collapse;color:rgb(51,51,51);"> 
 <tbody style="border:0px;line-height:1.1em;vertical-align:baseline;background:none;"> 
  <tr style="border:0px;line-height:1.1em;vertical-align:baseline;background:none;"> 
   <td style="background:none;border:1px solid rgb(192,192,192);border-collapse:collapse;line-height:1.1em;vertical-align:baseline;color:rgb(175,175,175);"> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> </td> 
   <td style="background:none;border:1px solid rgb(192,192,192);border-collapse:collapse;line-height:1.1em;vertical-align:baseline;"> 
    <div>
      person=18; 
    </div> 
    <div>
      person="zhuzhenwei"; 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

接下来，我说一下全部变量与局部变量的不同。如下:

<table style="font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;font-size:16px;border-collapse:collapse;color:rgb(51,51,51);"> 
 <tbody style="border:0px;line-height:1.1em;vertical-align:baseline;background:none;"> 
  <tr style="border:0px;line-height:1.1em;vertical-align:baseline;background:none;"> 
   <td style="background:none;border:1px solid rgb(192,192,192);border-collapse:collapse;line-height:1.1em;vertical-align:baseline;color:rgb(175,175,175);"> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> </td> 
   <td style="background:none;border:1px solid rgb(192,192,192);border-collapse:collapse;line-height:1.1em;vertical-align:baseline;"> 
    <div>
      function&nbsp;add(){ 
    </div> 
    <div>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;num=5;&nbsp; 
    </div> 
    <div>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(num);&nbsp; 
    </div> 
    <div>
      } 
    </div> 
    <div>
      add(); 
    </div> 
    <div>
      alert(num); 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

如果你认为这时会弹出一个窗口，显示为5，那你就错了！！这是因为，一旦在函数中我们用var声明了一个变量，那么用var操作符定义的变量将成为定义该变量的作用域中的局部变量（多读两遍啊），于是，num即为局部变量，且这个变量在函数退出后就会被销毁，所以我们用alert（num）；就得不到想要的弹出窗口了。而会在console控制台中提示错误：

如果省略var操作符，那么该变量就是一个全局变量。

于是，我们去掉试一试：

<table style="font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;font-size:16px;border-collapse:collapse;color:rgb(51,51,51);"> 
 <tbody style="border:0px;line-height:1.1em;vertical-align:baseline;background:none;"> 
  <tr style="border:0px;line-height:1.1em;vertical-align:baseline;background:none;"> 
   <td style="background:none;border:1px solid rgb(192,192,192);border-collapse:collapse;line-height:1.1em;vertical-align:baseline;color:rgb(175,175,175);"> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> </td> 
   <td style="background:none;border:1px solid rgb(192,192,192);border-collapse:collapse;line-height:1.1em;vertical-align:baseline;"> 
    <div>
      function&nbsp;add(){ 
    </div> 
    <div>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;num=5;&nbsp; 
    </div> 
    <div>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(num);&nbsp; 
    </div> 
    <div>
      } 
    </div> 
    <div>
      alert(num); 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

这时候，发现控制台提示了与上面同样的错误！！

这是为什么呢？

仔细对比一下，你会发现我漏掉了add（）;这个调用函数。由于当函数被调用时，才会创建该变量并为其赋值。因此，如果我们没有调用该函数，num这个变量就永远不会被创建，更不可能alert了！

下面我们补充完整。

<table style="font-family:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;font-size:16px;border-collapse:collapse;color:rgb(51,51,51);"> 
 <tbody style="border:0px;line-height:1.1em;vertical-align:baseline;background:none;"> 
  <tr style="border:0px;line-height:1.1em;vertical-align:baseline;background:none;"> 
   <td style="background:none;border:1px solid rgb(192,192,192);border-collapse:collapse;line-height:1.1em;vertical-align:baseline;color:rgb(175,175,175);"> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> </td> 
   <td style="background:none;border:1px solid rgb(192,192,192);border-collapse:collapse;line-height:1.1em;vertical-align:baseline;"> 
    <div>
      function&nbsp;add(){ 
    </div> 
    <div>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;num=5;&nbsp; 
    </div> 
    <div>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(num);&nbsp; 
    </div> 
    <div>
      } 
    </div> 
    <div>
      add(); 
    </div> 
    <div>
      alert(num); 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

ok，这样就可以得到我们想要的结果了。

![1044137-20161029163754015-494385778.jpg][]

本文转自zsdnr 51CTO博客，原文链接：http://blog.51cto.com/12942149/1929376，如需转载请自行联系原作者

[1044137-20161029163754015-494385778.jpg]: /images/20220206/f3431526dcfb45cba0247ce6c1548d87.png