扒一扒JavaScript 預解釋
帶var關鍵字預解釋
讓我們先看下這段代碼執(zhí)行的結果：
alert(n);//彈出undefined
var n = 10;
彈出的結果是undefined，為何不是10？讓我們再看下面這段代碼執(zhí)行的結果：
alert(n);
n = 10;
運行報如下錯誤：
為何這次會報錯，原因是代碼在運行的時候，沒有聲明這個變量n；通過這兩段代碼的比較，我們發(fā)現(xiàn)帶var關鍵字和不帶var關鍵字聲明的變量是有區(qū)別的，帶var聲明的變量在代碼執(zhí)行之前，似乎瀏覽器已經給了它們一個初始值undefined，因此我們將代碼執(zhí)行前，瀏覽器引擎自動掃描帶var關鍵字和帶function關鍵字（后面會提到）聲明的變量和定義的函數(shù)的這個過程稱為預解釋。
帶function關鍵字預解釋
讓我們看下如下代碼執(zhí)行的結果：
fn();//彈出hello
function fn(){
alert('hello');
}
執(zhí)行結果彈出hello，fn能夠正常執(zhí)行，原因是在代碼執(zhí)行前fn被預解釋了，在預解釋時已經將fn定義（defined）了，我們又有疑問了，為何第一段代碼執(zhí)行結果不彈出10，而是undefined，再次引入了另一個概念JavaScript中的聲明和定義。
JavaScript中的聲明（declare）和定義（defined）
我們通常用var關鍵來聲明變量，用function關鍵字來定義函數(shù)，只不過function關鍵字聲明和定義函數(shù)是同時執(zhí)行的，而var它只能聲明變量，并不具備定義的功能。
如下是用var關鍵字聲明的變量：
var n;//聲明了一個變量n
var m = 10;//聲明了一個變量m，并且將10賦值給它
如下是用function關鍵字定義的函數(shù)：
//定義了一個函數(shù)fn
function fn(){
alert('hello');
}
帶var關鍵字和帶function關鍵字預解釋的區(qū)別
其實它倆的區(qū)別就是帶var關鍵字預解釋時只預解釋聲明部分（因為它本身不具備定義的能力），而帶function關鍵字在預解釋時聲明和定義同時被預解釋。這時我們再回頭分析下第一段代碼，分析如下：
無節(jié)操（坑爹）的預解釋
為何說它無節(jié)操，請看下面的代碼（火狐除外）：
alert(n);
fn();
if(false) {
var n = 10;
function fn(){
alert('hello');
}
}
第一行代碼執(zhí)行會彈出undefined，第二行代碼執(zhí)行會彈出hello；是因為n和fn在代碼執(zhí)行前被預解釋了，即使if條件判斷為false，執(zhí)著的瀏覽器引擎也會將帶var關鍵字聲明的變量n和帶function關鍵定義的fn掃描到。
*預解釋忽略重新聲明，不忽略重新定義
這個地方因為相對比較繞而且不太好理解，所以加了一個星號，請看如下代碼：
alert(n);
var n = 10;
var n = 9;
var n;
alert(n);
這段代碼執(zhí)行結果是什么，我們來分析一下：
繼續(xù)上代碼，請分析如下執(zhí)行結果：
fn();
function fn() {
alert('1');
}
fn();
function fn() {
alert('2');
}
fn();
代碼分析圖如下：
帶function定義的函數(shù)預解釋分析
總結：
本篇博文用了大篇幅代碼和截圖對JavaScript中預解釋作了概述，縱觀各種書籍對預解釋的描述甚少，其實平時在工作中使用的場景也并不多，遺憾的是預解釋是各大公司面試題必考。在剛開始接觸它的時候，感覺它總是不按照常理寫代碼，但是有些時候卻能夠正常運行并不會報錯，當然這也增加了我們對它神秘感的探索，也讓我們進一步了解瀏覽器引擎是怎么解釋執(zhí)行我們的代碼。特此在后面的博文中我會拿幾道經典的案例來綜合分析它，再次感謝大家的支持！
相關文章
Promise是異步編程的一種解決方案，比傳統(tǒng)的解決方案——回調函數(shù)和事件——更合理和更強大。簡單說就是一個容器，里面保存著某個未來才會結束的事件（通常是一個異步操作）的結果。從語法上說，Promise是一個對象，從它可以獲取異步操作的消息2023-04-04
JavaScript中數(shù)組嵌套對象排序方法的示例詳解
在?JavaScript?中,可以使用?sort()?方法對包含嵌套對象的數(shù)組進行排序,本文將通過三個簡單的示例為大家進行簡單的介紹,需要的可以參考下2024-03-03
本篇文章主要介紹了js出生日期 年月日級聯(lián)菜單的示例代碼。需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
JavaScript去掉空格的方法集合，腳本之家以前發(fā)布過很多的去除空格的代碼，這個更多更全面。2010-12-12
這篇文章主要介紹了js簡單設置與使用cookie的方法,以簡單實例形式分析了JavaScript設置與調用cookie的方法,需要的朋友可以參考下2016-01-01
這篇文章主要為大家詳細介紹了如何基于JS實現(xiàn)一個發(fā)送驗證碼的計時器效果,文中的示例代碼講解詳細,感興趣的小伙伴快跟隨小編一起學習一下吧2023-11-11
最近小編接到這樣的項目需求，接口返回的數(shù)據中時間單位為秒，但前端顯示的時候需要更人性化的帶有單位（天，小時，分鐘，秒）的字符串；下面小編給大家?guī)韺嵗a，感興趣的朋友跟隨小編一起看看吧2019-07-07
javascript實現(xiàn)輸出指定行數(shù)正方形圖案的方法
這篇文章主要介紹了javascript實現(xiàn)輸出指定行數(shù)正方形圖案的方法,可實現(xiàn)javascript獲取用戶輸入及根據輸入參數(shù)打印圖形的功能,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了javascript深拷貝的原理與實現(xiàn)方法,簡單分析了值傳遞和引用傳遞的原理與實現(xiàn)方法,并結合實例形式給出了深拷貝的具體實現(xiàn)技巧,需要的朋友可以參考下2017-04-04
JsDoc Toolkit 是一個把js描述格式化成文檔的工具。開發(fā)者只需按JsDoc的規(guī)范寫好注釋就可以很方便導出文檔。它是google 推薦的 JsDoc生成工具。2011-02-02