Javascript中的變量提升、函數(shù)提升及變量訪問(wèn)原則

zhigoo 發(fā)布于2019-08-23 14:29 / 2802人閱讀

摘要：變量提升什么是變量提升在函數(shù)體內(nèi)聲明的變量，無(wú)論你是在函數(shù)的最底端還是中間聲明的，那么都會(huì)把該變量的聲明提升到函數(shù)的最頂端相當(dāng)于第一行，但是只是提升變量的聲明，不會(huì)賦值。

1、變量提升

什么是變量提升？
在函數(shù)體內(nèi)聲明的變量，無(wú)論你是在函數(shù)的最底端還是中間聲明的，那么都會(huì)把該變量的聲明提升到函數(shù)的最頂端(相當(dāng)于第一行)，但是只是提升變量的聲明，不會(huì)賦值。

var num = 10;
fun(); //輸出結(jié)果為undefined
function  fun(){
    console.log(num);
    var num = 20;
}

/*上面這個(gè)函數(shù)相當(dāng)于：
    function  fun(){
        var num;
        console.log(num);
        num = 20;
    }
*/

2、函數(shù)提升

什么是函數(shù)提升？
在JavaScript中以函數(shù)聲明的方式創(chuàng)建的函數(shù)就跟用var創(chuàng)建的變量一樣，它們的聲明都會(huì)提前聲明，這就使得我們?cè)贘avaScript中可以調(diào)用函數(shù)在前面，而聲明函數(shù)在后面，這就是函數(shù)提升。

func();
function func(){
    alert(“函數(shù)執(zhí)行了！”);
}
/*
上面這段代碼相當(dāng)于：
function func(){
    alert(“函數(shù)執(zhí)行了！”);
}
func();
*/

3、函數(shù)與變量同名時(shí)的變量提升

alert(fun); // 最終輸出結(jié)果為：輸出fun函數(shù)體
function fun(){
    alert(“我是一個(gè)函數(shù)”);
}
var fun = “我是一個(gè)變量”;
alert(fun); // 輸出：我是一個(gè)變量

/* 為什么第一個(gè)alert輸出的是fun函數(shù)體，而第二個(gè)alert輸出的是“我是一個(gè)變量”？
因?yàn)橛胿ar聲明的變量及function聲明的函數(shù)在執(zhí)行前都會(huì)將聲明提升到最前面，如果變量與函數(shù)同名，
那么在聲明的時(shí)候會(huì)忽略變量，只提升函數(shù)聲明！ */

/*
上面這段代碼相當(dāng)于：
function fun(){
    alert(“我是一個(gè)函數(shù)”);
}
alert(fun);
fun = “我是一個(gè)變量”;
alert(fun);
*/

4、變量搜索原則(變量訪問(wèn)原則)

在JavaScript中變量的訪問(wèn)(搜索)是有原則的：

1）、首先在訪問(wèn)變量的作用域(函數(shù))中查找該變量，如果找到直接使用
2）、如果沒(méi)有找到，去上一級(jí)作用域中查找，如果找到直接使用
3）、如果還是沒(méi)有找到，則再去上一級(jí)作用域中查找，知道全局作用域
4）、如果找到了就直接使用，如果沒(méi)有找到則報(bào)錯(cuò)

var num = 123;
function foo1(){
    function foo2(){
        console.log(num);
    }
    /*當(dāng)調(diào)用foo2時(shí)，會(huì)首先去foo2這個(gè)作用域中查找是否有num變量，結(jié)果沒(méi)找到則去上一級(jí)作用域(即foo1)中查找是否有foo1變量，
    結(jié)果還 是沒(méi)找到，則再去上一級(jí)作用域(全局作用域)中查找，結(jié)果找到了，則拿來(lái)使用*/
    foo2();
}

5、變量提升、變量搜索機(jī)制經(jīng)典面試題

fun();

console.log(b);
console.log(c);
console.log(a);

functoin fun(){
    var a = b = c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}