javascript 解析顺序

ES5 解析顺序

ES6没有这样的解析顺序

1. 定义阶段

​ 先找到当前作用域(不会找子作用域)的 var 和 function 关键词

​ var 先把变量定义出来，但是不会赋值(赋值属于执行阶段)

​ function 先把函数定义出来

2. 执行阶段

​ 从上到下执行

例一

*	1. 定义
*		var a;
*		functon b(){}
*	2. 执行
*		b();
*		a = 10;
*/

b();
var a = 10;
function b(){
    alert(1);
}
//var b = function(){}不属于function定义的，属于var定义的

例二

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


/*
	全局作用域
	1.定义
		var x;
		function a(){...}
	2.执行
		x = 10;
		a();	====>   局部作用域
						1.定义
							var x;
						2.执行
							x = 20;
							console.log(x); //20
		console.log(x);//10
*/

例三

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

/*
	1.定义
		function a(){} //第一个a 被覆盖
		function a(){} //第二个a
	2.执行
		a();//2
*/

例四

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

//只要有var 和 function 同名，以function为准

案例

一

var x = 5; 
a(); 
function a(){    
    alert(x);    
    var x = 10; 
}
alert(x)

//undefined 5
/*
	1.定义
		var x;
		function a(){...}
	2.执行
		x = 5;
		a();	===>	局部作用域
						1.定义
							var x;
						2执行
							alert(x);  //undefined
							x = 10;
		alert(x);	//5
*/

二

a();
function a(){    
    alert(x);   
    var x = 10; 
} 
alert(x);

//undefined 报错
/*
	1.定义
		function a(){...}
	2.执行
		a();	===>	局部作用域
						1.定义
							var x;
						2执行
							alert(x);  //undefined
							x = 10;
		alert(x);	//报错
*/

三

function a(){    
    alert(1); 
} 
var a; 
alert(a);

//f a(){}

四

alert(a); 	//function a(){alert(40)}
var a = 10; 
alert(a); 	//10
function a(){//在定义阶段定义，执行阶段不调用则不进入
    alert(20)
} 
alert(a);	//10
var a = 30; 
alert(a); 	//30
function a(){
    alert(40)
} 
alert(a);	//30

/*
	1.定义
		var a;				//被覆盖
		function a(){..20}	//被覆盖
		var a;				//被覆盖
		function a(){..40}
	2.执行
		alert(a);	//function a(){alert(40)} 函数块
		a = 10;
		alert(a); 	//10
		alert(a); 	//10
		a = 30;
		alert(a); 	//30
		alert(a); 	//30
*/

五

var a = 10; 
alert(a); 
a();
alert(a); //报错后后面的同步代码不执行了
function a(){    
    alert(20); 
}
//10 报错
/*
	1.定义
		var a;				//被覆盖
		function a(){..20}
	2.执行
		a = 10;
		alert(a);	//10
		a();		//报错  a现在是number(a is not a function)
*/

六

a(); 
var a = function(){
    alert(1)
}; 
a(); 
function a(){
    alert(2)
}; 
a(); 
var a = function(){
    alert(3)
};
a();

//2 1 1 3
/*
	1.定义
		var a;				//被覆盖
		function a(){..2}
		var a;				//有function以function为准
	2.执行
		a();	//2
		a = function a(){..1}
		a();	//1
		function a(){..2}//定义阶段，执行阶段跳过
		a();	//1
		a = function a(){..3}
		a();	//3
*/

七

var a = 10; 
function fn(){   
    alert(a);   
    var a = 1;   
    alert(a); 
} 
fn(); 
alert(a);
//undefined 1 10
/*
	1.定义
		var a;
		functon fn(){}
	2.执行
		a = 10;
		fn();	===>	局部作用域
						1.定义
							var a
						2.执行
							alert(a);	//undefined 1 10
							a = 1;
							alert(a);	//1
		alert(a);	//10
*/			

八

fn(); 
alert(a); 
var a = 10; 
alert(a); 
function fn(){    
    var a = 1;
}
//undefined 10
/*
	1.定义
		var a;
		functon fn(){}
	2.执行
		fn();	===>	局部作用域
						1.定义
							var a
						2.执行
							a = 1;
		alert(a); 	//undefined
		a = 10;
		alert(a);	//10
*/