Web | JavaScript的提升機制
阿新 • • 發佈:2018-12-18
作用物件: 函式和變數的宣告.
作用效果: 會將其宣告提升到其所在的作用域的最頂端.函式會優先於變數的宣告.
//函式的提升優於變數的提升
test();
var a=2;
function test(){
console.log(a);
}
//瀏覽器會將其提升為===>
function test(){
console.log(a);
}
var a;
test();
a=2;
如果在同一個作用域內,有相同命名的變數和函式,那麼變數的宣告就會被忽略掉,只要函式的宣告有效.(但是變數的賦值行為依然有效)
//相同命名的變數和函式宣告 foo(); var foo; function foo() { console.log( 1 ); } //瀏覽器解析====> function foo() { console.log( 1 ); } //var foo; 被忽略無效 foo(); //2 function a() {} var a; console.log(typeof a)//function //3 var c = 1 function c(c) { console.log(c) var c = 3 } c(2) //結果是error
藉助一些小例項能夠更清晰的看到提升所帶來的效果
var foo=2; test(); function test(){ foo=5; function foo(){ console.log(1); } } console.log(foo); //瀏覽器解析====> function test(){ function foo(){ console.log(1); } foo=5; } var foo; foo = 2; test(); console.log(foo) //==>2
需要注意的是,如果是在程式碼塊中宣告的函式,會自己轉化成函式表示式,那麼提升的就僅僅只是指向表示式的變數.
//程式碼塊中無作用域
console.log(a);//undefined
console.log(b);//undefined
if(true){
var a=0;
}else{
var b=2;
}
//程式碼塊中的函式轉化,下面函式相當於註釋的樣子
console.log(test)//undefined
if(true){
/*var test =function (){
console.log("if");
}*/
function test (){
console.log("if");
}
}else{
/*var test =function (){
console.log("eles");
}*/
function test (){
console.log("else");
}
}
console.log(test)//函式