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

概述

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

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

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

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

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

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

方便记忆的代码如下：

  <script>

              var test_id = "my love";

               if(true){

                   console.log(test_id);

                   var test_id = "where my love?";

                   console.log(test_id);

               }

               console.log(test_id);

          </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 ，注意一下：代码不同之处

  <script>

              var a = "heh"

              function findLove(){

                  console.log(a);

              }

              findLove();

          </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

巴特西

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

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

总结

最新文章

热门文章