JavaScript之预编译

 初学JavaScript，遇到预编译这个梗，学完，感觉对于JS代码的理解和执行过程又更深了一步。

首先说一下，众所周知，JavaScript语言是一种解释性语言。JavaScript代码执行分为三个步骤：

1.语法分析 2.预编译 3.解释执行

在预编译阶段简单总结两句话：1，函数声明整体提升----提升到逻辑的最前面

      2，变量声明提升---只是把声明提升到最前面

预编译阶段有两点：1.imply glpbal  按时全局变量   任何变量如果变量未经声明就赋值,此变量为全局变量所有,

a = 10相当于window.a = 10。

    2. 一切声明的变量归Windows所有。

  咱们在这里有一个定律：window就是全局。

一，函数预编译过程  四部曲

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(){}		
	console.log(d);
}
fn(1);

   以上述代码为例

 1.创建AO对象  Activation Object (执行期上下文)

AO{
						
						

      }

2.找形参和变量声明,将变量和形参名作为AO的属性名.值为undefined,(不重复)

AO{
	a: undefined,
	b: undefined,
		      }

   3.将实参和形参相统一

AO{
	a: 1,
	b: undefined,
		    }                                                                                   

 4.在函数体里面找函数声明,值赋予函数体

AO{
	a: function a(){}, a =1被覆盖
	b: undefined,
	d: function d(){},
				  	}

在预编译过程中执行上述步骤，然后解释代码

 

function fn(a){				  	AO{
	a: function a(){}, a =1被覆盖
	b: undefined,
	d: function d(){},
			}
console.log(a);
var a = 123;
AO{
	a: 123, 
	b: undefined,
	d: function d(){},
			}

console.log(a);
function a(){} //在预编译已经被提升 不解释此代码
AO{
	a: 123, 
	b: undefined,
	d: function d(){},
			}
console.log(a);
var b = function(){}  // var b 预编译执行 不解释,解释后面 b = function(){}
AO{
	a: 123, 
	b: function(){},
	d: function d(){},
			}
console.log(b);
function d(){}

AO{
	a: 123, 
	b: function(){},
	d: function d(){},
			}
console.log(d);
}
fn(1);

二，预编译全局

上面讲的是函数内的预编译，现在说一下全局预编译。

全局预编译比函数预编译少了一个步骤，由于全局变量没有形参实参，所以把第三步省掉了。

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

 以上述代码为例：

1.这里和函数内部预编译不一样，函数预编译生成AO对象，全局预编译生成GO对象（ Global Oject）

在这里GO对象就等于window。

GO{

    }

 2.找形参和变量声明,将变量和形参名作为GO的属性名.值为undefined,(不重复)

 

GO{
	a : undefined,
			}

 3.在函数体里面找函数声明,值赋予函数体

GO{
  a: function(){}
}

 对于上述例子，我们执行一遍。

 

//开始进行预编译过程
GO{
	a : function(){},
		}
console.log(a);
var a = 123;
GO{
	a : 123,
		}
console.log(a);
function a (){} // 预编译提升   不解释此代码
GO{
	a : 123,
		}
console.log(a);

以上就是全局预编译过程和函数内的预编译过程，个人感觉明白这些可以让自己更明白代码，明白运行过程。

希望可以帮到大家，初学者，有什么不足纰漏的欢迎评论指出。共同进步。

——主页传送门——