关于javascript变量作用域的研究。

开始

一个变量的作用域(scope)是程序源代码中定义这个变量的区域。全局变量具有全局作用域,在javascript中的任何地方都是有定义的。然而在函数内申明的变量只在函数体内有定义。他们是局部变量,作用域是局部性的。函数参数也是局部变量,他只在函数体内有定义。下面就来看看我在这几个方面做的尝试与测试。

1.全局变量可以被任何地方访问到,而局部变量则不行。我们来看看下面的代码:

    var global = "global";
    function f(){
        var local = "local";
        alert(global);  //==>"global"  全局变量可以被访问的
    }
    f();
    alert(local); //==> 报错:local is not defined    

2.尽管全局变量可以不用var申明,但是局部变量就一定要用var申明。否则的话,如果申明的局部变量与一个全局变量重名的情况下就会修改这个全局变量,如果没有与之重名的全局变量就会申明一个全局变量。我们来看看下面的代码:

 

    function f(){
        local = "local";  //没有用var申明,相当于申明了全局变量
    }
    f();
    alert(local);  //==> "local" 

    var global = "global";
    function f2(){
        global = "local";  //没有用var申明并且有与之重名的global全局变量相当于修改了global全局变量
    }
    f2();
    alert(global);  //==> "local"        

 

3.在函数体内,局部变量的优先级要高于同名的全局变量。如果在函数体内申明的一个局部变量或者函数参数中带有变量和全局变量重名,那么全局变量就会被拘捕变量覆盖。我们来看看下面的代码:

   var scope = "global";        //申明一个全局变量
    function f(){
        var scope = "local";    //申明一个同名的局部变量
        alert(scope);
   }
    f();                        //==> "local"

4.函数体内全局变量的申明提前。说道申明提前,可能比较陌生。我们就来看一下一道经典的javascript面试题:

    var scope = "global";
    function f(){
        alert(scope);
        var scope = "local";
        alert(scope);
    }
    f();    

也许你会误以为函数中的第一行会输出"global",因为代码还么有运行到var语句申明局部变量的地方。其实不然,由于函数作用域的特性,局部变量在整个函数体始终是定义的,也就是说,在函数体内的局部变量覆盖了全局变量,只有在var语句执行是才给其赋值。所以代码等同于以下代码:

    function f2(){
        var scope;           
        alert(scope);            //undefined
        scope = "local";        //local
        alert(scope);            
    }
    f2();    

明白了吧,所以有经验的程序员都会将函数体内的申明都会提前到前面,这是一种良好的编码习惯。

5.那么函数参数和申明的局部变量重名的情况呢?

    function f(t){
        alert(t);
        var t;
        alert(t)
    }
    function f2(t){
        alert(t);
        var t = 30;
        alert(t);
    }
    f(20);
    f2(20);    

看一下运行结果:f()-->20 , 20;  f2()-->20 , 30;

这是什么原因呢?我总结了一下:在函数参数和局部变量重名的情况下,如果局部变量只是申明了,但是没有赋值,局部变量是不会覆盖参数的。如果局部变量赋值了,就从赋值的那一行起,向下覆盖参数变量。

通过以上的发现是不是明了许多了?其实javascript入门容易,但是精通难。所以大家一起共勉进步吧。最后引用一下《javascript权威指南》为本文做一下总结:"javascript最顶层的代码中(也就是不包含在任何函数定义的代码),作用域链由一个全局对象组成。在不包含嵌套的函数体内,作用域链上有两个对象,第一个是定义函数参数和局部变量的对象,第二个是全局对象。当定义一个函数时,他实际上保存了一个作用域链。当调用这个函数时,他创建一个新的对象来存储他的局部变量,并将这个对象添加至保存的那个作用域上,同事创建一个新的更长的表示函数用用作用域的‘链’"

=============低调的分割线==============

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。