?

帶var關(guān)鍵字預(yù)解釋

讓我們先看下這段代碼執(zhí)行的結(jié)果：

alert(n);//彈出undefined var n = 10;

彈出的結(jié)果是undefined，為何不是10？讓我們?cè)倏聪旅孢@段代碼執(zhí)行的結(jié)果：

alert(n); n = 10;

運(yùn)行報(bào)如下錯(cuò)誤：，為何這次會(huì)報(bào)錯(cuò)，原因是代碼在運(yùn)行的時(shí)候，沒(méi)有聲明這個(gè)變量n；通過(guò)這兩段代碼的比較，我們發(fā)現(xiàn)帶var關(guān)鍵字和不帶var關(guān)鍵字聲明的變量是有區(qū)別的，帶var聲明的變量在代碼執(zhí)行之前，似乎瀏覽器已經(jīng)給了它們一個(gè)初始值undefined，因此我們將代碼執(zhí)行前，瀏覽器引擎自動(dòng)掃描帶var關(guān)鍵字和帶function關(guān)鍵字（后面會(huì)提到）聲明的變量和定義的函數(shù)的這個(gè)過(guò)程稱(chēng)為預(yù)解釋。

?

帶function關(guān)鍵字預(yù)解釋

讓我們看下如下代碼執(zhí)行的結(jié)果：

fn();//彈出hello function fn(){alert('hello'); }

執(zhí)行結(jié)果彈出hello，fn能夠正常執(zhí)行，原因是在代碼執(zhí)行前fn被預(yù)解釋了，在預(yù)解釋時(shí)已經(jīng)將fn定義（defined）了，我們又有疑問(wèn)了，為何第一段代碼執(zhí)行結(jié)果不彈出10，而是undefined，再次引入了另一個(gè)概念JavaScript中的聲明和定義。

?

JavaScript中的聲明（declare）和定義（defined）

我們通常用var關(guān)鍵來(lái)聲明變量，用function關(guān)鍵字來(lái)定義函數(shù)，只不過(guò)function關(guān)鍵字聲明和定義函數(shù)是同時(shí)執(zhí)行的，而var它只能聲明變量，并不具備定義的功能。

如下是用var關(guān)鍵字聲明的變量：

var n;//聲明了一個(gè)變量n var m = 10;//聲明了一個(gè)變量m，并且將10賦值給它

如下是用function關(guān)鍵字定義的函數(shù)：

//定義了一個(gè)函數(shù)fn function fn(){alert('hello'); }

?

帶var關(guān)鍵字和帶function關(guān)鍵字預(yù)解釋的區(qū)別

其實(shí)它倆的區(qū)別就是帶var關(guān)鍵字預(yù)解釋時(shí)只預(yù)解釋聲明部分（因?yàn)樗旧聿痪邆涠x的能力），而帶function關(guān)鍵字在預(yù)解釋時(shí)聲明和定義同時(shí)被預(yù)解釋。這時(shí)我們?cè)倩仡^分析下第一段代碼，分析如下：

?

無(wú)節(jié)操（坑爹）的預(yù)解釋

為何說(shuō)它無(wú)節(jié)操，請(qǐng)看下面的代碼（火狐除外）：

alert(n); fn(); if(false) {var n = 10;function fn(){alert('hello');} }

第一行代碼執(zhí)行會(huì)彈出undefined，第二行代碼執(zhí)行會(huì)彈出hello；是因?yàn)閚和fn在代碼執(zhí)行前被預(yù)解釋了，即使if條件判斷為false，執(zhí)著的瀏覽器引擎也會(huì)將帶var關(guān)鍵字聲明的變量n和帶function關(guān)鍵定義的fn掃描到。

?

預(yù)解釋范圍僅限于當(dāng)前代碼塊

請(qǐng)看下面這段代碼執(zhí)行結(jié)果：

<script>alert(n); </script> <script>var n = 10; </script>

對(duì)于上述代碼，共有兩個(gè)代碼塊，此時(shí)n并不彈出undefined，而會(huì)報(bào)錯(cuò)；因?yàn)樵诘谝粋€(gè)代碼塊中，沒(méi)有對(duì)任何代碼預(yù)解釋，它是不會(huì)超出當(dāng)前代碼塊去下一個(gè)代碼塊預(yù)解釋n，所以報(bào)錯(cuò)。

?

*預(yù)解釋忽略重新聲明，不忽略重新定義

這個(gè)地方因?yàn)橄鄬?duì)比較繞而且不太好理解，所以加了一個(gè)星號(hào)，請(qǐng)看如下代碼：

alert(n); var n = 10; var n = 9; var n; alert(n);

這段代碼執(zhí)行結(jié)果是什么，我們來(lái)分析一下：

?

繼續(xù)上代碼，請(qǐng)分析如下執(zhí)行結(jié)果：

fn(); function fn() {alert('1'); } fn(); function fn() {alert('2'); } fn();

代碼分析圖如下：

?

總結(jié)：

本篇博文用了大篇幅代碼和截圖對(duì)JavaScript中預(yù)解釋作了概述，縱觀各種書(shū)籍對(duì)預(yù)解釋的描述甚少，其實(shí)平時(shí)在工作中使用的場(chǎng)景也并不多，遺憾的是預(yù)解釋是各大公司面試題必考。在剛開(kāi)始接觸它的時(shí)候，感覺(jué)它總是不按照常理寫(xiě)代碼，但是有些時(shí)候卻能夠正常運(yùn)行并不會(huì)報(bào)錯(cuò)，當(dāng)然這也增加了我們對(duì)它神秘感的探索，也讓我們進(jìn)一步了解瀏覽器引擎是怎么解釋執(zhí)行我們的代碼。特此在后面的博文中我會(huì)拿幾道經(jīng)典的案例來(lái)綜合分析它，再次感謝大家的支持！

轉(zhuǎn)載于:https://www.cnblogs.com/everyding/p/JavaScript-hoisting.html

總結(jié)

以上是生活随笔為你收集整理的JavaScript那些事儿-不被知晓的预解释的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。