1.js的運(yùn)行和預(yù)編譯過程
<1>.語法分析
查找基本語法有無錯誤；
<2>、預(yù)解析/預(yù)編譯
執(zhí)行之前進(jìn)行預(yù)解析；
var,function關(guān)鍵字提前到當(dāng)前作用域頂部，即變量提升或函數(shù)提升，變量默認(rèn)值為undefined，函數(shù)默認(rèn)值為函數(shù)體代碼塊，當(dāng)函數(shù)與變量重名時，保留函數(shù)。
<3>、解釋執(zhí)行
2.例題
1）、變量可以在使用后聲明，也就是變量可以先使用后聲明
x =?5;?// 變量 x 設(shè)置為 5
elem = document.getElementById("demo");?// 查找元素?
elem.innerHTML = x;?// 在元素中顯示 x
var?x;?// 聲明 x
變量 提升之后
var?x;?// 聲明 x
x =?5;?// 變量 x 設(shè)置為 5
elem = document.getElementById("demo");?// 查找元素?
elem.innerHTML = x;??
2)只有聲明的變量會提升，而初始化的不會
例1.var?x =?5;?// 初始化 x
var?y =?7;?// 初始化 y
elem = document.getElementById("demo");?// 查找元素?
elem.innerHTML = x +?" "?+ y;// 顯示 x 和 y
對比
例2、var?x =?5;?// 初始化 x
elem = document.getElementById("demo");?// 查找元素?
elem.innerHTML = x +?" "?+ y;// 顯示 x 和 y
var?y =?7;?// 初始化 y
此例中y的輸出值為undefined,這是因為變量聲名(var y)提升了，但是y=7沒有提升，所以y變量是一個沒有定義的變量。
變量提升之后
var x = 5; // 初始化 x
var y; // 聲明 y
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y; // 顯示 x 和 yy = 7; // 設(shè)置 y 為 7
3)、其他一些例題
//預(yù)編譯
/* console.log(a);
var a = 10; //變量提升
console.log(a); */
/* 提升之后的結(jié)果
var a;
console.log(a);
a = 10; */
4）、局部作用域中的變量提升
/* var b = 10;
function foo(){
console.log(b);
var b = 20;
}
foo(); */
/*// 提升之后的結(jié)果
var b = 10;
function foo(){
var b;
console.log(b);
b = 20;
}
foo();
*/
函數(shù)提升
例題
//函數(shù)提升(包括函數(shù)體一塊提升)
/* bar();
function bar(){
alert(123);
} */
//通過function關(guān)鍵字申明的函數(shù)會連著函數(shù)體一塊提升到當(dāng)前作用域頂部
//但是通過變量名賦值為一個匿名函數(shù)的方式申明的函數(shù),只會提升變量的申明,函數(shù)體不會提升
/* bar();
var bar = function(){
alert(456);
} */
/* 提升之后的，會報錯
var bar;
bar();
bar = function(){
alert(456);
} */
注意：1.局部變量只作用于函數(shù)內(nèi)部，所以不同的函數(shù)可以使用相同名稱的變量
2、局部變量在函數(shù)開始時創(chuàng)建，在函數(shù)執(zhí)行完成之后銷毀。（局部變量出棧即銷毀）
3、如果變量在函數(shù)內(nèi)沒有var即沒有聲明，該變量為全局變量。
例題
/* alert(a);
var a = 1;
alert(a);
function a(){alert(2);}
alert(a);
var a = 3;
alert(a);
function a(){alert(3);}
alert(a);*/
預(yù)編譯之后
/* function a(){alert(3);}
alert(a); //function a(){alert(3);}
a = 1;
alert(a); //1
alert(a); //1
a = 3;
alert(a); //3
alert(a); //3 */
