js 预编译法则

js执行过程

1. 检查通篇的语法错误

1.5. 预编译的过程

2. 解释一行，执行一行

0 1

引 言

例1：

test(）;
function test()
{  
 console.log(1);

}

打印结果：1

原因：

函数函数声明整体提升，且我们还知道变量只有声明提升,赋值是不提升

例2 ：

console.log(a);
function a(a){
  var a =10;
  var a=function(){
  }
}
var a = 1;

打印结果 ：函数 a

原因：变量提升优先与函数提升，故函数覆盖了变量的提升，结果为函数a

0 2

预编译法则

GO global object 全局上下文

GO：在整个通篇的JS执行之前，产生的一个GO对象

预编译过程：

寻找变量声明

寻找函数声明

执行

其实GO就是window（window在存储全局变量的时候也是这么存的）

AO activation object 函数上下文

AO：在函数执行之前，产生的一个AO对象

预编译步骤：

寻找函数里面的形参和变量声明，放到AO里面（变量声明的提升）

实参值赋值给形参

找函数声明并赋值函数体

然后执行（赋值）

下面，我们通过几道例题来理解一下

例3：

function test(a) {
    console.log(a);  
    var a = 1;
    console.log(a);  
    function a() { }
    console.log(a);  
    var b = function () { }
    console.log(b);  
    function d() { }
}
test(2);

结果为：

function a() { }

1

1

function(){

}

分析:

顺序：形参 > 变量声明 > 实参值赋值给形参 > 函数声明

第一个输出function a(){} ,因为函数声明，覆盖了前面的

第二个输出为1；因为函数声明已经提升了，这是在赋值之后了

第三个输出为1；与第二个原因相同

第四个输出function(){}

例4：

var a = 1;
function a() {
    console.log(2);
}
console.log(a);

结果为：1

分析：

变量提升 > 函数提升 > 执行

所以，结果为执行语句后的值 1；

例5：

var b = 3;
console.log(a);
function a(a) {        // AO声明先从形参开始看
    console.log(a);
    var a = 2;
    console.log(a);
    function a() { }
    var b = 5;
    console.log(b);
}
a(1)

结果为：

function a(a){ ... }

function a(){}

2

5

分析：

第一个输出function a(a){ ... } , 在函数外部，就是看GO 全局上下文的执行顺序，这就是函数提升了

第二个输出为 function a(){} , 这是在函数内部，就要看AO函数上下文件的执行顺序了， 因形参 > 变量声明 > 实参值赋值给形参 > 函数声明 ；故结果为function a(){}

第三个输出2 ， 函数提升后，就可以忽略原来的位置代码

第四个输出5