三大件之预编译（一）

1. 预编译的基本认知

error的几种问题

console.log(a);
// Uncaught SyntaxError: Invalid or unexpected token
console.log(a)；
// Uncaught SyntaxError: Invalid or unexpected token
console.log(a);
// Uncaught SyntaxError: Invalid or unexpected token
// 后面正确的不会执行
// 1. js引擎先通篇检查语法错误
// 2. 预编译的过程
// 3. 解释一行执行一行
test()
function test() {}
// 函数执行放在上面也会执行

console.log(a)// undefined
var a = 10;

console.log(a)// a is not defined

由上可以看出声明是关键， 赋值不是关键

函数声明是要提升到逻辑代码最上面

变量只有声明提升， 赋值 不提升

// 示例
console.log(a);// ？ function a() {}
function a(a) {
    var a = 10;
    var a = function() {
        
    }
}
var a = 1;

2. 暗示全局变量

**imply global varible **

var a = 1,
    b = 2;
console.log(a)

/*
window = {
  a: 1,
  b: 2
}
*/
// 全局变量都在window 默认全局变量

function test() {
    var a = b = 1;
}
test()
console.log(b) // 1
console.log(a) // a is not defined
console.log(window.a) // undefined
// 访问对象里不存在的属性 默认undefined
// 直接访问一个变量， 变量不存在就会报错
// 

3. 暗示全局变量与AO GO

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

不是函数内部的问题，全局的问题

在整个js执行之前产生一个GO(Global object) 全局上下文

执行之前创建GO

GO = {

a: undefined => function a() {} =>1

}

1. 寻找变量
2. 找函数声明
3. 执行

实际上G0就等于window

// 提升前
console.log(a, b)// function a(){}, undefined
function a() {}
var b = function() {}

// 解析：
// GO = {
//  b: undefined,  此时还没有进行赋值
//  a: function() {}
// }
// 提升后
function a() {}
var b;
console.log(a, b);
b = function() {}

4. 函数预编译与AO

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

函数预编译就是在函数执行之前进行的一个步骤

AO：activation object 活跃对象 ，函数上下文

AO = {

a: undefined,

b: undefined

}

AO = {

a: undefined=>2

b: undefined

}

AO = {

a: undefined=>2=>function a() {}

b: undefined

d: function

}

AO = {

a: undefined=>2=>function a() {}=>1

b: undefined => function() {}

d: function

}

1. 寻找函数形参和变量声明
2. 实参参数值赋值给形参
3. 寻找函数声明，赋值函数体
4. 执行这个函数

栗子：

function test(a, b) {
    console.log(a);// 1
    c = 0;
    var c;
    a = 5;
    b = 6;
    console.log(b) // 6
    function b() {}
    function d() {}
    console.log(b); // 6
}
test(1)
/*
第一步： 寻找函数形参和变量声明
AO = {
  a: undefined,
  b: undefined,
  c: undefined
}
第二步:实参参数值赋值给形参
AO = {
  a: undefined--> 1
  b: undefined,
  c: undefined
}
第三步：寻找函数声明，赋值函数体
AO = {
  a: undefined--> 1
  b: undefined--> function b() {}
  c: undefined
  d: function() {}
}
第四步： 执行函数
AO = {
  a: undefined--> 1 -->5
  b: undefined--> function b() {} -->6
  c: undefined--> 0
  d: function() {}
}

注意预编译做过的事情函数执行就不需要做了
*/

a = 1;
function test() {
    console.log(a);// undefined
    a = 2;
    console.log(a);// 2
    var a = 3;
    console.log(a) // 3
}
test()
var a;

/*
首先GO
GO = {
  a: undefined
  test: function() {}
}

执行
GO = {
  a: undefined -> 1
  test: function() {}
}
AO:
第一步： 寻找函数形参和变量声明
AO = {
  a: undefined
}
第二步:实参参数值赋值给形参
第三步：寻找函数声明，赋值函数体
第四步： 执行函数

AO = {
  a: undefined -> 2 -> 3
}

为什么a是undefined？ AO中有a变量， 因此不回去GO中去寻找
*/

function test() {
    console,log(b);
    if(a) {
        var b = 2;
    }
    c = 3;
}
var a;
test()
a = 1;
console.log(a)
/*
首先GO
GO = {
  a: undefined
  test: function() {}
  c: undefined
}

执行
GO = {
  a: undefined
  test: function() {}
  c: undefined -> 3
}
AO:
第一步： 寻找函数形参和变量声明
AO = {
  b: undefined
}
第二步:实参参数值赋值给形参
第三步：寻找函数声明，赋值函数体
第四步： 执行函数

AO = {
  a: undefined
}

为什么a是undefined？ AO中有a变量， 因此不回去GO中去寻找
预编译过程中不看if等语句，只看有没有变量声明 有就拿出来 然后执行语句 成立该赋值赋值

*/
function test() {
    return a;
    a = 1;
    function a() {}
    var a = 2;
}
console.log(test);