2019-11-22 seo達(dá)人
詳細(xì)解讀—函數(shù)和變量的聲明提升
一 - 聲明提升常見面試題
?我們先以幾道面試題開頭來引入，
?大家可以先給自己做出一個(gè)答案，然后再看文章的思路捋一捋喲。
來一道基礎(chǔ)的吧~
var a="Hello";
function test(){
alert(a);
var a="World";
alert(a);
}
test();
難度+1
var a = 1;
function outer(){
a = 2;
function inner(){
alert(a);
a = 4;
}
inner();
}
outer();
alert(a);
繼續(xù)加油
(function(){
f1();
f2();
var f1 = function(){};
function f2(){
alert(1);
}
})();
最后一道
(function () {
console.log(a);
var a=1;
function a() {
console.log("biu~");
}
})()
二 - 究竟什么是聲明提升？
引擎在解釋JS代碼之前，首先要對JS代碼進(jìn)行編譯，其中編譯的一部分工作就是找到所有的聲明，包括變量和函數(shù)的所有聲明都會(huì)在任何代碼被執(zhí)行前首先被處理。
var a = 1這句話會(huì)被瀏覽器讀成 var a和a = 1兩句話執(zhí)行，其中var a會(huì)在編譯階段就先執(zhí)行了，而a = 1這段賦值代碼會(huì)在原地等待執(zhí)行階段。
console.log(a);
var a = 2;
上邊這段代碼，如果代碼按照順序由上自下執(zhí)行，那么執(zhí)行到console.log(a);時(shí)，a還沒有聲明,所以會(huì)包一個(gè)找不到變量a的錯(cuò)，但是事實(shí)上，這句話打印了一個(gè)undefined，說明a被聲明了，但是沒有被賦值，那么結(jié)合上一段的文字，我們可以得出代碼實(shí)際運(yùn)行的是這樣的：
var a;
console.log(a);
a = 2;
三 - 函數(shù)的提升
大家可能在書寫代碼的時(shí)候發(fā)現(xiàn)，無論函數(shù)封裝寫在前或者后，我們的函數(shù)調(diào)用都可以順利執(zhí)行。
fn1();//可以執(zhí)行
function fn1() {
console.log("hello");
}
為什么呢？其實(shí)函數(shù)聲明,包括函數(shù)的代碼塊都i會(huì)被提升，所以調(diào)用函數(shù)的時(shí)候，函數(shù)聲明已經(jīng)被執(zhí)行過了。
但是有個(gè)案例大家了解一下：
fn2();//報(bào)錯(cuò)，fn2不是一個(gè)函數(shù)
var fn2 = function () {
console.log("world");
}
我們可以看到 以給匿名函數(shù)賦值的形式定義函數(shù)，只會(huì)提升函數(shù)聲明，但是函數(shù)表達(dá)式卻不會(huì)被提升。因?yàn)樽兞縡n2被提升,但是并沒有賦值，我們書寫的fn2()無法運(yùn)行，而拋出了異常。
以下就是實(shí)際執(zhí)行的順序：
var fn2;
fn2();
fn2 = function () {
console.log("world")
}
函數(shù)優(yōu)先提升
我們都知道了，函數(shù)聲明和變量聲明都會(huì)被提升，那么遇到這樣的情況會(huì)怎么辦？
fn3();
var fn3=function () {
console.log("fn3-1");
}
fn3();
function fn3() {
console.log("fn3-2");
}
哎呦，嘛情況，突然迷了！?。?br />
? 這個(gè)時(shí)候你就要考慮，同樣的一個(gè)變量名稱，到底是把var fn3給先提聲上去，再提升 fn3函數(shù)體？還是先提升 fn3函數(shù)體，再提升var fn3？？？其實(shí)都不對?。。?br />
? 答案是：函數(shù)會(huì)被優(yōu)先提升，但后才是變量提升，但是當(dāng)函數(shù)提升后，然后發(fā)現(xiàn)還有一個(gè)變量聲明和函數(shù)聲明一樣的名稱，這個(gè)就是重復(fù)聲明，那么這個(gè)var fn3 是不生效直接忽略的。
所以實(shí)際代碼運(yùn)行順序是：
function fn3() {
console.log("fn3-2");
}
fn3();//fn3-2
fn3=function () {//var fn3因?yàn)橹貜?fù)聲明被忽略
console.log("fn3-1");
}
fn3();//fn3-1
當(dāng)然，我們還是建議再同一個(gè)作用域重復(fù)聲明是很爛的選擇
說在最后
再代碼作用域中的聲明，都會(huì)在代碼執(zhí)行前被首先處理，所有的聲明都會(huì)被移動(dòng)到各自作用域的最頂端，這個(gè)過程就叫做聲明提升。
四 - 答案：
問題1：
var a="Hello";
function test(){
alert(a);
var a="World";
alert(a);
}
test();
實(shí)際執(zhí)行：
var a="Hello";
function test(){
//作用域有聲明a，聲明提升到這里
var a;
alert(a);//本作用域聲明a，所以不去使用父作用域的a，但是本作用域的a沒有賦值，所以彈出undefined
a="World";
alert(a);//賦值后 ，彈出world
}
test();
問題2：
var a = 1;
function outer(){
a = 2;
function inner(){
alert(a);
a = 4;
}
inner();
}
outer();
alert(a);
執(zhí)行結(jié)果：
var a = 1;
function outer(){
a = 2;
function inner(){
//本作用域沒有聲明a，所以沒有任何提升，直接執(zhí)行
alert(a); // 所以彈出 a為 2
a = 4;
}
inner();
}
outer();
alert(a);//只有全局聲明了a，所以所有作用域使用的都是全局的a，所以a最后被賦值為4 彈出4
問題3
(function(){
f1();
f2();
var f1 = function(){};
function f2(){
alert(1);
}
})();
實(shí)際執(zhí)行結(jié)果：
(function(){
function f2(){
alert(1);
}
var fn1;
f1();//提升后先執(zhí)行fn1(),但是fn1被提升的是變量不是函數(shù)，所以這里報(bào)錯(cuò)，不是一個(gè)函數(shù)
f2();//上一句話報(bào)錯(cuò)，這句話不再運(yùn)行
f1 = function(){};
})();
問題4：
(function () {
console.log(a);
var a=1;
function a() {
console.log("biu~");
}
})()
實(shí)際執(zhí)行結(jié)果：
(function () {
function a() {
console.log("biu~");
}
console.log(a);//打印了a這個(gè)函數(shù)的函數(shù)體
a=1;//因?yàn)楹瘮?shù)有限聲明提升，所以這里的var a被提升時(shí)，發(fā)現(xiàn)重復(fù)聲明，故被忽略了var a；
})()
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.miumiuwan.com