快捷導(dǎo)航

扒一扒JavaScript 預(yù)解釋

更新時間：2015年01月28日 15:48:46 投稿：hebedich

這篇文章主要介紹了JavaScript 預(yù)解釋,包含帶var關(guān)鍵字預(yù)解釋、帶function關(guān)鍵字預(yù)解釋,需要的朋友可以參考下

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

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

alert(n);//彈出undefined

var n = 10;

彈出的結(jié)果是undefined，為何不是10？讓我們再看下面這段代碼執(zhí)行的結(jié)果：

復(fù)制代碼代碼如下:

alert(n);

n = 10;

運(yùn)行報如下錯誤：

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

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

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

復(fù)制代碼代碼如下:

fn();//彈出hello

function fn(){

    alert('hello');

}

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

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

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

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

復(fù)制代碼代碼如下:

var n;//聲明了一個變量n

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

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

復(fù)制代碼代碼如下:

//定義了一個函數(shù)fn

function fn(){

    alert('hello');

}

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

其實它倆的區(qū)別就是帶var關(guān)鍵字預(yù)解釋時只預(yù)解釋聲明部分（因為它本身不具備定義的能力），而帶function關(guān)鍵字在預(yù)解釋時聲明和定義同時被預(yù)解釋。這時我們再回頭分析下第一段代碼，分析如下：

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

為何說它無節(jié)操，請看下面的代碼（火狐除外）：

復(fù)制代碼代碼如下:

alert(n);

fn();

if(false) {

    var n = 10;

    function fn(){

        alert('hello');

    }

}

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

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

這個地方因為相對比較繞而且不太好理解，所以加了一個星號，請看如下代碼：

復(fù)制代碼代碼如下:

alert(n);

var n = 10;

var n = 9;

var n;

alert(n);

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

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

復(fù)制代碼代碼如下:

fn();

function fn() {

    alert('1');

}

fn();

function fn() {

    alert('2');

}

fn();

代碼分析圖如下：

帶function定義的函數(shù)預(yù)解釋分析

總結(jié)：

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

您可能感興趣的文章: