Javascript作用域

用几个经常会碰到的变态笔试题弄懂Javascript作用域吧！　

1.练习　

alert(a)
var a = 10;
alert(a);
a();
function a(){
   alert(2);      
}

　　1.1 以上代码JS是如何解析的呢？

　　首先，我们要明白Javascript的解析过程有定义阶段和执行阶段，那么我就用我理解的来做这些练习题

　　分析:

　　　　(1) 定义 (var和函数声明)

　　　　　　var a ;

   　　　　　function a() {alert(2);}

　　　　　　在定义阶段就只有这两个，而因为它们的名字相同，所以var a会被忽略，那么就只剩下

　　　　　　function a() {alert(2);},于是在定义阶段只剩下函数声明

　　　　(2) 执行

　　　　　　来到执行阶段，OK，那就一步步往下执行好了

　　　　　　alert(a)    // 定义阶段有function a() {alert(2)},于是会弹出这个函数体

　　　　　　a = 10;   // 这一步是赋值，上一步相当于 var a = function() {alert(2);},这一步改变了a的值

　　　　　　alert(a)   // 10

　　　　　　a();  // 这里会报错，a is not function,因为此时a已经赋值为10，那么10()是什么呢？所以会报错

　　1.2 于是乎，以上这道题的答案就是，首先弹出function a() {alert(2);} ,然后再弹出10.

2.练习

alert(a);
var a=10;

alert(a);
function a(){
    alert(20);
}

alert(a);
var a=30;

alert(a);

function a(){alert(40);}
alert(a);

　　2.1 上面这道题看上去是不是也会很晕呢？那么JS到底是怎样解析的呢？其实通过上面的分析，很快就会得出答案

　　分析：(由于上面已经分析得很详细，那么下面的分析思路就省略了)

　　　　(1) 定义 (var和函数声明)

　　　　　　var a;

　　　　　　function a(){alert(20);}

　　　　　　var a;

　　　　　　function a(){alert(40);}

　　　　　　最后剩下function a(){alert(40);}　

　　　　2.执行

　　　　　　第1条语句  alert(a)  //function a(){alert(40);}

　　　　　　第2条语句  a = 10   //给a赋值

　　　　　　第3条语句  alert(a)  //10

　　　　　　第4条语句是函数声明，是在定义阶段，不是执行阶段

　　　　　　第5条语句  alert(a)  //10

　　　　　　第6条语句  a = 30;  //赋值

　　　　　　第7条语句　alert(a)  //30

　　　　　　第8条语句同第4条语句都是函数定义

　　　　　　第9条语句  alert(a)  //30

　　2.2于是乎，上面的执行结果为function a(){alert(40);},10,10,30,30

3.练习

a();
var a = function(){alert(1);}
a();
function a(){alert(2);}
a();
var a = function b(){alert(3);}
a();

　　3.1分析JS的解析过程

　　　　1.定义

　　　　　　 function a(){alert(2);}

　　　　2.执行

　　　　　　a();  //2;

　　　　　　a = function(){alert(1)};  //赋值

　　　　　　a();  //1

　　　　　　a() // 1;

　　　　　　a = function b(){alert(3)} //赋值

　　　　　　a() //3

　　　　3.2 以上执行结果为2,1,1,3

4 练习

var a = 0;
function fn(){
    alert(a);
    var a = 1;
    alert(a);
}
fn();

　　4.1分析

　　　　(1) 定义

　　　　　　var a;

　　　　　　function fn(){alert(a);var a=1;alert(a);}

　　　　(2) 执行

　　　　　　fn() //fn()作用域

　　　　　　　　　　(1) 定义

　　　　　　　　　　　　var a;

　　　　　　　　　　(2) 执行

　　　　　　　　　　　　alert(a)  //undefined

　　　　　　　　　　　　a = 1;  //赋值

　　　　　　　　　　　　alert(a)  //1

　　4.2 这里就会有全局作用域和局部作用域的考察，在fn()作用域中，当函数执行完成，变量会销毁.结果为undefined,1

5.练习，如果我们将第四道题稍微改定一下，讲fn()函数里声明的变量a，var去掉那会怎样呢？

1 var a = 0;
2 function fn(){
3     alert(a);
4     a = 1;
5     alert(a);
6 }
7 fn();

　　5.1 分析

　　　　(1) 定义

　　　　　　var a;

　　　　　　function fn(){alert(a);a=1;alert(a)}

　　　　(2) 执行

　　　　　　fn() // fn()作用域

　　　　　　　　　　(1) 定义

　　　　　　　　　　　　　在此作用域未定义

　　　　　　　　　　(2) 执行

　　　　　　　　　　　　alert(a)   //会往上级作用域查找a,于是弹出0

　　　　　　　　　　　　a = 1 //赋值

　　　　　　　　　　　　alert(a)  //1

　　5.2 结果为0,1

6.练习

fn();
alert(a);
var a = 0;
alert(a);
function fn(){
    var a = 1;
}

　　6.1 分析

　　　　(1) 定义

　　　　　　var a;

　　　　　　function fn(){var a=1;}

　　　　(2) 执行

　　　　　　fn() // 什么也不做

　　　　　　alert(a)  //undefined

　　　　　　a = 0;  //赋值

　　　　　　alert(a)  //0

　　6.2 结果弹出undefined,0

7.练习

fn();
var a = 0;
function fn() {
   alert(a);
   var a = 3;
   function c() {
       alert(a);
    }
    return c;
}

　　7.1 分析

　　　　(1) 定义

　　　　　　var a;

　　　　　　function fn(){alert(a);var a=3;function c(){alert(a)};return c;}

　　　　(2) 执行

　　　　　　fn() //fn()作用域

　　　　　　　　　　(1) 定义

　　　　　　　　　　　　var a;

　　　　　　　　　　　　function c(){alert(a);}

　　　　　　　　　　(2) 执行

　　　　　　　　　　　　alert(a)  //undefined

　　　　　　　　　　　　a = 3;  //赋值

　　7.2执行结果:弹出undefined

8.练习

var a = 1;
function fn(a){
    alert(a);
    a++;
    alert(a);
}
fn(a);
alert(a);

　　8.1 分析

　　　　(1) 定义

　　　　　　var a;

　　　　　　function fn(a){alert(a);a++;alert(a)} 

　　　　(2) 执行

　　　　　　a = 1; //赋值

　　　　　　fn(a)  //fn()作用域

　　　　　　　　　　(1)  定义

　　　　　　　　　　　　var a;   //参数

　　　　　　　　　　(2)  执行

　　　　　　　　　　　　a = 1; //赋值

　　　　　　　　　　　　alert(a)  // 1

　　　　　　　　　　　　a++ ;  //2

　　　　　　　　　　　　alert(a)   //2

　　　　　　alert(a)   //1

　　8.2 结果为弹出1,2,1

9.练习，对练习8的稍作改动，如果这时候fn函数定义的时候没有参数会怎样呢？请看下面的分析

var a = 1;
function fn(){
    alert(a);
    a++;
    alert(a);
}
fn(a);
alert(a);

　　9.1 分析

　　　　(1) 定义

　　　　　　var a;

　　　　　　function fn(){alert(a);a++;alert(a);}

　　　　(2) 执行

　　　　　　a = 1;  //赋值

  　　　　　fn(a)  //fn()作用域

　　　　　　　　　　(1) 定义

　　　　　　　　　　(2) 执行

　　　　　　　　　　　　alert(a)   //因为fn()作用域没有定义变量a，所以会向上查找 ，结果找到了a = 1,于是弹出1

　　　　　　　　　　　　a++  //2

　　　　　　　　　　　　alert(a)  //2

　　　　　alert(a)   //此时的a是多少呢？可以看到fn()里弹出的a是全部作用域，而这里即将弹出的a也是全局作用域，所以应该弹出2,而不是1

　　9.2执行结果为：1,2,2

10 总结

　　如此通过上述Javascript作用域的详解发现，只要我们清楚在定义阶段有哪些，在执行阶段变量的值，那么对于这样的题目只要仔细分析，就不会太难了吧！！嘿嘿，是不是收获很大呢？