JS预解析--变量提升

预解析的定义：在代码执行之前，先要预解析。JS预解析分为两类变量预解析(变量提升)和函数预解析(函数提升)

一.变量预解析

变量解析，变量提升。JS会把申明的变量，提升到当前作用域的最前面，只申明不赋值。let和var都有提升，但是let定义的变量没有赋值之前是不可以使用(当然有些人也说let是不能提升的)，var可以使用是undefined。任何一个作用域执行代码之前都要预解析。

二.函数预解析

函数解析，函数提升。JS会把带有名字的函数，提升到当前作用域最前面，只定义不调用。并不是所有的函数都要预解析。会把代码中具有名字的函数提前解析，解析到当前作用域最前面。但是，只定义，不调用。

三.案例

案例一：

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

/*
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);
/*
1.定义(全局)
function a(){...}
2.执行(全局)
a()===>新的作用域(函数作用域，局部)===>1.定义var x;2.执行:alert(x)//undefined;   x=10;
alert(x) //报错 x is not defined 全局 
*/

案例三：

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

/*
1.定义(全局)   注意：函数a和变量a重名的时候，函数占优(也可以理解为变量a比函数a提的更前面，导致被函数a覆盖了),所以下面的定义只定义函数a
function a(){...}
2.执行
alert(a) //弹出函数体
*/

案例四：

alert(a)
var a = 10;
alert(a);
function a(){
	alert(20);
}
alert(a);
var a = 30;
function a(){
	alert(40)
}
alert(a)

/*
1.定义var a被function a覆盖
function a(){alert(40)}
2.执行
alert(a) //函数体 function a(){alert(40)}
a = 10; //把function a(){}修改了
alert(a) //10
function a(){alert(20);}  // 不执行，因为被覆盖了function a(){alert(40)}
alert(a) //10
a = 30
alert(a) //30
*/

案例五：

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

/*
1.定义
function a(){alert(20);}
2.执行
a = 10    // 覆盖了function a(){alert(20);}
alert(a) //10
a() // 报错 a不再是函数，而是10 
*/

案例六：

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

/*
1.定义(var a;但是后面有个同名的function a()，所以var a被function a()顶替了，后面还有个var a，
  提升var a；但因为函数占优，所以只定义function a(){...})
function a(){alert(2)};
2.执行
a() //2
a = funtion() {alert(1)};
a() // 1
function a(){alert(2)}; // 不执行 因为已经提升了
a() // 1
a = function(){alert(3)};
a() // 3

*/

案例七：

var a = 10;
function fn(){
  alert(a);
  var a = 1;
  alert(a);
}
fn();
alert(a);

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

案例八：

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