JavaScript中的坑--全局变量惹得祸

js中变量的作用域及闭包的概念

 

概述

身为一名程序员，因为bug周末加班是必不可少的事情，当解决bug的时候，总有些bug是因为规范导致的，但是这些bug往往不好找，也就是“前人挖坑，后人好踩”。前段时间，出现了一个很莫名其妙的bug

就是有个模块页面数据不对。当时找了半天（以为是页面传值的问题），到最后才发现 主页面引用的几个js文件中存在一个相同的全局变量。

 

对js中的变量作用域的误解 

很多写js的都是需要前后台一起写的，我就是后台java,前台js分模块一起写的。在这里，我有一个误区，就是以为js和java中的语法是一样的。但实际上还是存在着一些不同的地方。比如js中作用域只是函数级别的

　　　1：在{}体内定义的局部变量，和在{}体外定义的局部变量 实际上是一个，并不会新建

　　　2：在函数体内定义的局部变量 ，和函数体外定义的没什么关系。

方便记忆的代码如下：

1  <script>
2              var test_id = "my love";
3               if(true){
4                   console.log(test_id);
5                   var test_id = "where my love?";
6                   console.log(test_id);
7               }
8               console.log(test_id);
9          </script>

 

显示结果：

　　

这就是js中没有块级作用域的证明： 很显然发现test_id实际上只有一个

证明js中变量是函数级别的

 <script>
             var test_id = "my love";
              function findLove(){
                  var test_id ;
                  console.log(test_id);
                  test_id = "is you?";
                  console.log(test_id);
              }
              findLove();
              console.log(test_id);
         </script>

 

输出结果：

 

然后我试了一下： 在{}体内不用var声明：

<script>
             var a = "heh"
             if(true){
                 console.log(a);
             }
         </script>

 

其实也是可以的 输出 heh

试一下 函数体内部用var ，注意一下：代码不同之处

1  <script>
2              var a = "heh"
3              function findLove(){
4                  console.log(a);
5              }
6              findLove();
7          </script>

 

  <script>
             var a = "heh"
             function findLove(){
                 console.log(a);
                 var a
             }
             findLove();
         </script>

 

 第一个输出的是 heh ;第二个输出的是 undifined,一目了然。这个地方 还有一个细节：就是在函数体内，先定义后打印和先打印和定义，实际上是一样。

自我测试一下吧：（猜一下输出结果，在验证一下吧）

 <script>
             var a = "heh"
             function findLove(){
                 console.log(a);
                 function findforyou(){
                     var a ="you";
                     console.log(a);
                 }
                 function findother(){
                     console.log(a)
                 }
                 findforyou();
                 findother();
             }
             findLove();
         </script>

 

 

 

二：函数闭包

　　因为js中变量的作用域是函数级的，所以用闭包来解决一些传值问题（比如递归）。篇幅太长了，另起一篇博客

 

总结

　　新人，发自肺腑的总结，希望可以帮助到你。另外，也希望可以多多支持，转载说明出处，谢了。必当结草衔环，勤恳不往初心

参考资料 

参考自下面的博客： 学习的时候，不建议直接去看作用域啥的。就是自己找个编辑器，试一下，一目了然。

http://blog.csdn.net/yueguanghaidao/article/details/9568071