javascript 执行模型的一些测试

一 js的扫描过程

    js在执行代码之前，会有一个扫描（相当于预编译）的过程，这一过程用于获取定义的变量名和函数对象。主要包括如下几个处理步骤：

1. 碰到了“var instance=xxx;” 这样的语句时，则在当前variable object上添加此属性，赋初值为undefined
2. 碰到了函数的定义"function func(){}"时，则使用此函数定义创建相应的函数对象，然后在varable object对象上添加此属性func，其值为返回的函数对象。
   

    下面来举例分析这一过程。

// a
var local_v = "local v";
global_v = "global v";

alert(local_v);    // 1
alert(global_v); // 2     
  

// b
function func1(){
      alert(local_v);
}

var func2 = function(){
      alert(local_v);
}

func1();  //3
func2();  //4

上面这些代码的执行过程如下：

1. 初始化Global Object即window对象，Variable Object为window对象本身。
2. 扫描源代码，在window对象上添加了 local_v 和 func2 属性，值都为undefined。添加了func1属性，值为该定义返回的函数对象。
3. 执行源代码，将local_v属性赋值为 “local v”，在global object 对象上加上属性  global_v 并赋值为“global v”。
4. 正确打印出 local_v  和 global_v 的值
   
5. 创建匿名函数对象，并将其值赋给“func2”属性。
6. 执行func1()函数，打印出local_v属性的值。
7. 执行func2()函数，打印出local_v属性的值。

     在这一分析的基础上，我们将上述代码中的1，2移到a上面；将3，4移到b上面，然后再一次执行。此时，第1条语句打印出的结果是"undefined"，而执行第2条语句时浏览器报错"global_v is not defined"。这是因为window对象上已经有local_v属性了，只是没有显示赋值；而global_v属性此时还不存在；同理，第3条语句正确输出了结果；而第4条语句则报错"func2 is not a function"。因为此时func1已经赋值为函数对象；而func2却没有。

     理解了js的这一执行模型，则能够正确回答出一些容易混淆的问题，比如如下的代码：

var x='global';
document.writeln(x);   // 1
func();

function func(){
    var x='func';
    function inner(){
       document.writeln(x);   // 2
       var x='inner';
       document.writeln(x);  // 3
    }
    inner();
    document.writeln(x);  // 4
} 

 

如上所示，如果对执行模型不是很清楚的话，很可能会以为第2条语句会输出"func"或者"inner"。

正确的输出结果应该是：  global    undefined    inner   func 。 第2条语句在执行之前，inner函数内的 variable object上用新的x属性值替代了scope chain上在func函数内的属性值，新值因为在此语句处还未赋值，故打印出的结果是"undefined"