前言
在經(jīng)過了一輪面試挫敗以后匾七，我發(fā)現(xiàn)了一個問題：
通常大公司對你的底層基本功非常感興趣昔期，他們根本不在乎你能夠使用多少個前端框架驹尼。因為真正的好公司都是自己開發(fā)框架的。
今天我們要像discovery節(jié)目一樣深入前端開發(fā)底層的知識尸执，揭露js es5中那些常見的疑難雜癥以及解決辦法。讓你搞清楚為什么這些大廠喜歡考你這些問題缓醋，然而這些問題背后又隱藏了什么歷史巨坑如失，讓龍哥給你層層揭開真相！
歷史謎案送粱！變量提升
不知道你又沒有發(fā)現(xiàn)褪贵，在js中var是一個非常有意思的關(guān)鍵字。
有意思到，它根本都不按照編程語言的邏輯去執(zhí)行—從上到下執(zhí)行脆丁。什么意思世舰，我TM還沒有聲明這個變量的時候，我居然就可以用了槽卫。
console.log(name); //dangyunlong
var name = "dangyunlong"
這是非常殘酷的一個事實跟压。說明es5中通過var來聲明變量，這個變量無論在當前作用域的什么位置歼培，它都會被提到作用域的最頂部震蒋。
console.log(name);//報錯
let name = 1;
console.log(name);//1
當然，這個問題在es6中已經(jīng)通過let關(guān)鍵字躲庄，解決了查剖。
那么，僅僅就這樣而已嗎噪窘？當然不是笋庄！
我們再更進一步，把這個例子寫的稍微復(fù)雜一點效览，給它增加一個作用域无切。
var name = 2;
(function(){
console.log(name);//2
})()
首先我們普及兩個知識點：
1.js中沒有塊作用域，只有全局和函數(shù)作用域丐枉。
2.自執(zhí)行匿名函數(shù)哆键，也叫做立即執(zhí)行函數(shù)，無論你寫在頁面的任何位置瘦锹，它都會先于所有代碼執(zhí)行籍嘹。
ok，然后我們再回來看這個例子弯院。自執(zhí)行匿名函數(shù)先于代碼執(zhí)行辱士，可是，var的name還是存在听绳。這說明var的權(quán)限是更高颂碘，這里打印出來的是全局的name。
懵逼的開始椅挣！
看完了上面的例子头岔，咱們再來看這個：
(function(){
console.log(num);//undefined
var num = 1;
})()
這里你感覺num應(yīng)該打印出來1嗎，那你就錯了鼠证，這里打印出來undefined峡竣。
但是我們上面說，var出來的值量九，再任何位置都可以用笆赎颂碧？為什么在函數(shù)體中不能先使用再聲明呢？
龍哥猜測类浪，這可能跟我們在函數(shù)體內(nèi)聲明變量载城，該變量成為局部變量有關(guān)系，
(function(){
console.log(num);//undefined
var num = 1;
console.log(num);//1
})()
放到下面就可以打印出來了戚宦。
來道面試題做做
var name = "tom";
(function(){
if(typeof name==="undefined"){
name = "jack";
console.log("goodbye"+name);
}else{
console.log("hello"+name);
}
})()
這道題應(yīng)該打印什么个曙？
看過前面的例子我們就知道了，應(yīng)該打印hello tom受楼。
我們來解釋一下垦搬，首先，全局里面有var的變量艳汽，全局的肯定最大猴贰，無論在哪都能訪問到。所以typeof name肯定就不是undefined河狐。于是就進入了判斷的else環(huán)節(jié)米绕，所以打印出來hello tom。
然后龍哥把這道題升級了：
var name = "dangyunlong";
(function(){
console.log(name); //第一個
var name = "lilei";
name = "gaoyuanyuan"
})()
console.log(name); //第二個
function fun(){
name = "shiliujie"
}
fun();
console.log(name); //第三個
請問這三個console.log分別打印什么馋艺。
解：
1.第一個我們跟前面一題的道理一樣栅干，打印undefined。
2.第二個打印dangyunlong捐祠。有的同學可能會問碱鳞，第二個不是打印gaoyuanyuan嗎？注意踱蛀，如果沒有它上面的var name = “l(fā)ilei”它確實會打印gaoyuanyuan窿给。但是有了var，表示當前的name已經(jīng)指函數(shù)體的局部變量name了率拒，而不是全局那個崩泡。
3.第三個打印shiliujie。道理跟第二個一樣猬膨，因為這次函數(shù)體內(nèi)修改的是全局變量的值角撞，并沒有聲明局部變量！
歷史謎案勃痴！函數(shù)聲明提升谒所！
先來補充一個小知識：
什么是函數(shù)聲明和函數(shù)表達式。
//函數(shù)表達式
var fun1 = function(){
console.log("我是fun1");
}
//函數(shù)聲明
function fun2(){
console.log("我是fun2");
}
來看這倆哥們召耘。
咱們也不賣關(guān)子了百炬，這倆在執(zhí)行上面沒有任何區(qū)別褐隆。是一模一樣的污它。
那么問題就來了，難道這個也存在提升的問題嗎？是的衫贬。
//函數(shù)表達式
var fun1 = function(){
console.log("我是fun1");
}
fun1(); //我是fun1
//函數(shù)聲明
function fun2(){
console.log("我是fun2");
}
fun2(); //我是fun2
這樣運行是沒問題的德澈，但是，請看這種寫法：
fun1(); //fun1 is not a function
//函數(shù)表達式
var fun1 = function(){
console.log("我是fun1");
}
fun2(); //我是fun2
//函數(shù)聲明
function fun2(){
console.log("我是fun2");
}
函數(shù)表達式直接報錯固惯，但是梆造，函數(shù)聲明可以運行。
這TM就太厲害了葬毫。我們使用var的關(guān)鍵字出來的函數(shù)沒有被提升镇辉，但是直接function卻提升了，這是怎么回事贴捡？
其實這里面有一個誤區(qū)忽肛，就是除了變量會提升以外，函數(shù)也會被提升烂斋。
如果我們直接聲明一個函數(shù)屹逛，他也一樣會提升到頂部。但是汛骂，如果我們以變量形式聲明一個函數(shù)表達式罕模，它其實走的是變量提升：
fun1(); //fun1 is not a function
//函數(shù)表達式
var fun1 = function(){
console.log("我是fun1");
}
//執(zhí)行順序
var fun1;
fun1();
fun1 = function(){
console.log("我是fun1");
}
這樣的話，會報fun1不是function帘瞭，因為變量提上去了以后淑掌，變量并沒有被賦值。然后我們又執(zhí)行了fun1();
所以這里就直接報錯了图张。fun1這時候還不是函數(shù)锋拖，所以肯定是報這個錯誤了。
最后總結(jié)
所以龍哥幫大家總結(jié)除了以下結(jié)論祸轮，以后再做題的時候兽埃，一定要注意：
1.如果題中有函數(shù)，先看是否在函數(shù)內(nèi)部使用了var适袜。如果使用了柄错，這里面的賦值就是指局部變量。局部變量沒有提升的問題苦酱，如果先打印售貌，會報undefined。
2.函數(shù)中沒有var直接賦值的疫萤，修改的是全局的值颂跨。
3.全局變量無論在什么地方聲明，都會提升到作用域的頂部扯饶。所以即使在開頭就打印恒削，打印出來的也是var的值池颈。
4.函數(shù)聲明有提升的問題，函數(shù)表達式走的是變量提升钓丰，所以提前運行會報這個方法不是一個function躯砰。
到此，提升問題全部浮出水面携丁，最好的解決辦法當然是通過let讯壶。這個提升的問題一定要注意佛吓，否則很有可能你無意之中修改了全局數(shù)據(jù)届吁，導致溢出污染十电。
