JS 预编译过程的理解

JS中存在变量提升的现象。这个现象的产生是和JS本身的预编译顺序相关联的。
之前的文章在变量部分提到过变量的提升，随着理解的深入，这里详细总结下预编译的过程

1、 检查通篇的语法错误；
1.5、预编译的过程；
     函数声明整体提升；变量只有声明提升，赋值不会提升；
     (1) 在执行之前的过程是预编译
     (2) 先产生全局域GO，全局域按照GO的执行顺序进行
     (3) 函数执行会产生一个AO的域，按照AO的执行顺序进行
2、 逐行解释执行；

暗示全局变量 未声明直接赋值，会默认挂载到全局变量上

function test () {
    var a = b = 1;
}
test()
console.log(a) // ReferenceError: a is not defined
console.log(window.a) // undefined
console.log(b) // 1

AO 活跃对象，函数的上下文

• 步骤一：寻找函数的形参和变量声明
• 步骤二：实参的参数值赋值给形参
• 步骤三：寻找函数的声明赋值给函数体
• 步骤四：执行

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);// f()a{} // 1 // f()b{}
/*
AO 活跃对象，函数的上下文
步骤一：寻找函数的形参和变量声明
AO = {
    a: undefined,
    b: undefined
}
步骤二：实参的参数值赋值给形参
AO = {
    a: undefined->2,
    b: undefined
}
步骤三：寻找函数的声明赋值给函数体
AO = {
   a: undefined->2->function a(){},
   b: undefined,
   d: function d(){}
}
步骤四：执行
AO = {
   a: undefined->2->function a(){}->1,
   b: undefined-> function (){},
   d: function d(){}
}
第一个log 得到的a是 function a () {}
第二句执行时，a被赋值为1
第二个log 1
第三个log 1
var b = function (){}
第四个log是 functioin b(){}
*/

AO 练习题

// 练习题
function test (a, b) {
    console.log(a)
    c = 0;
    var c;
    a = 5;
    b = 6;
    console.log(b);
    function b(){} // 在预编译的过程汇总做了,执行时就不在做了
    function d(){} // 在预编译的过程汇总做了,执行时就不在做了
    console.log(b);
}
test(1,2)
/*
  AO = {
      a: undefined,
         1,
         5,
      b: undefined,
         2,
         function b(){},
         6
      c: undefined,
         0
      d: function d(){}
  }
  1,6,6
*/

GO 全局活动对象 window

• 步骤一：寻找变量
• 步骤二：找函数的声明
• 步骤三：执行

// 实例1
var a = 1;
function a() {
    console.log(2);
}
console.log(a) // 1
/*
GO = {
    a: undefined
       function a
       1
    }
*/
// 实例2
console.log(a,b)
function a(){}
var b = function(){}
/*
 GO = {
     b: undefined,
        funciton(){}
     a: function a(){}
 }
*/
// 实例3
function test() {
    var a = b = 1;
    console.log(a);
}
test();
/*
执行之前的过程是预编译的过程
GO = {
    b: undefined,
       1
}
AO = {
    a: undefined,
       1 // 自己AO 中没有就到GO中去找
}
*/
// 实例4
var b = 3
console.log(a)
function a (a) {
    console.log(a) // 1
    var a = 2;
    console.log(a) // 2
    function a () {}
    var b = 5
    console.log(b)
}
a(1)
/*
GO = {
    b: undefined,
       3
}
AO = {
    a: undefined,
       1,
       function a(){},
       2,
    b: undefined,
       5
}
fa(a) fa(b),2,5
*/

AO 和 GO 的练习题

// 练习题1
function test () {
    return a
    a = 1
    functon a (){}
    var a = 2
}
console.log(test()) // funcation a(){}
/*
AO = {
    a: unefined,
       funcation a(){}
}
执行就直接return
*/
// 练习题2
console.log(test()) // 2
function test () {
    a = 1;
    function a () {}
    var a = 2;
    return a
}
/*
AO = {
    a: undefined,
       function a(){},
       1,
       2
}
*/
// 练习3
a = 1;
function test(e) {
    function e(){}
    arguments[0] = 2
    console.log(e)
    if(a){
        var b = 3
    }  //  注意if是在执行是才看的，预编译时不看if的判断
    var c
    a = 4
    var a
    console.log(b)
    f = 5
    console.log(c)
    console.log(a)
}
var a
test(1) 
console.log(a)
console.log(f)
// 2, undefined, undefined , 4, 1, 5
/*
GO = {
    a:undefined,
      1
    test: function test(){...},
    f: undefined,
       5
}
AO = {
    e: undefined,
       function e(){},
       2
    b: undefined,
    a: undefined,
       4
    c: undefined
}
*/