如何理解JS中的预编译

js运行三部曲

语法分析

预编译

解释执行

预编译

(函数声明 整体提升)
(变量 声明提升)

如果变量未经声明就赋值，此变量就为全局对象所有。

a = 123; -----> window.a = 123;

一切声明的全局变量，全是window 的属性。

var b = 123; ----> window.b = 123;

window 为全局对象，就是全局的域，window 也叫 GO (Global Object)

预编译四部曲

1.创建AO对象 (Activation Object，执行期上下文，也叫作用域)

2.找形参和变量声明(var a)，将变量和形参名作为AO属性名，值为 undefined

3.将实参值和形参统一

4.在函数体里面找函数声明(function b () {})，函数名为AO属性名，值赋予函数体

//	例一
function fn(a){	
    console.log(a);
    
    var a = 123;
    
    console.log(a);				
    
    function a () {}
    
    console.log(a);
    
    var b = function () {}
    
    console.log(b);
    
    function d () {}
}
fn(1);

/*
	--第一步		//形参和变量声明值为undefined
	AO{
		a : undefined
		b : undefined
	}
	
	--第二步		//实参和形参值统一
	AO{
		a : 1
		b : undefined
	}
	
	--第三步		//函数声明，赋值函数体
	AO{
		a : function a () {}
		b : undefined
		d : function d () {}
	}
*/

//	即整理为
function fn (a){
    function a () {}
    function d () {}
    console.log(a);				//	function a () {}
    var a = 123;
    console.log(a);				//	123
    console.log(a);				//	123
    var b = function () {}
    console.log(b);				//	function () {}
}
fn(1);

//	例二
function test(a,b){
    console.log(a);
    c = 0;
    var c;
    a = 3;
    b = 2;
    console.log(b);
    function b () {}
    function d () {}
    console.log(b);
}
test(1);

//	整理为
function test(a,b){
    function b () {}
    function d () {}
    var c;
    console.log(a);				//	1
    c = 0;
    a = 3;
    b = 2;
    console.log(b);				//	2
    console.log(b);				//	2
}
test(1);

//	例三
console.log(test);
function test(test){
    console.log(test);
    var test = 234;
    console.log(test);
    function test() {}
}
test(1);
var test = 123;

//	整理为
console.log(test);				//	function test(test){	.......	}
function test(test){
    function test() {}
    var test;
    console.log(test);			//	function test(){}
    test = 234;
    console.log(test);			//	234
}
test(1);
var test = 123;

//	例四
function test (){
    console.log(b);
    if(a){
        var b = 100;
    }
    console.log(b);
    c = 234;
    console.log(c);
}
var a;
test();
a = 10;
console.log(c);

//	整理为
function test(){
    var b;
    console.log(b);				//	undefined
    if(a){						//	a 为 undefined
        b = 100;
    }
    console.log(b);				//	undefined
    c = 234;
    console.log(c);				//	234
}
var a;
test();
a = 10;
console.log(c);					//	234

//	例五
function bar(){
    return foo;
    foo = 10;
    function foo(){}
    var foo = 11;
}
console.log(bar());

// 整理为
function bar(){
    function foo(){}
    var foo;
    return foo;					//	function foo(){}
    foo = 10;
    foo = 11;
}
console.log(bar());				//	function foo(){}