寫這篇文章之前，我看到了簡(jiǎn)書中的另一篇文章，鏈接如下：
前端基礎(chǔ)進(jìn)階（二）：執(zhí)行上下文詳細(xì)圖解

作者所述的 “執(zhí)行上下文” 的概念在我看來實(shí)是復(fù)雜，不是說寫的不對(duì)或是表述有什么問題，只是偏向底層，并不適合理解，這樣的文章放在前端基礎(chǔ)進(jìn)階的第二篇，對(duì)于新手來說是否有些不太友好？

寫了一點(diǎn)隨筆，寥寥數(shù)語(yǔ)，不堪成文。

其實(shí)總結(jié)起來就一句話，在執(zhí)行js代碼之前，瀏覽器會(huì)對(duì)js代碼進(jìn)行預(yù)解析。

規(guī)則如下：

• 將變量聲明提前到所有代碼的最前面；
• 將函數(shù)聲明提前到函數(shù)聲明之后，其他代碼之前；

function foo () { 
    console.log('function foo')
}
var foo = 20;
console.log(foo);   // 20

我們首先來看一下這段代碼經(jīng)過預(yù)解析之后會(huì)變成什么樣：

var foo
function foo () { 
    console.log('function foo')
}
foo = 20
console.log(foo)

此時(shí)再看打印結(jié)果，自然也就一目了然了
我們繼續(xù)往下看：

/* ----- 預(yù)解析之前 -----*/

console.log(foo);
function foo () { 
  console.log('function foo')
}
var foo = 20;

/* ----- 預(yù)解析之后 -----*/

var foo;                 //  變量聲明提至最前
function foo () {         //  函數(shù)聲明提到變量聲明之后，其他代碼之前
  console.log('function foo')
}
console.log(foo);        //  打印 foo
foo = 20

顯而易見的是，此時(shí)foo代表的是函數(shù)，下一行的變量賦值還沒有進(jìn)行，所以打印內(nèi)容便為foo函數(shù)

關(guān)于預(yù)解析過程，歸根結(jié)底也就只是開頭的那兩句話，
愿我的分享可以給大家?guī)硇┰S的收獲

一切能用 Js 實(shí)現(xiàn)的，終將都會(huì)使用 Js 來實(shí)現(xiàn)。