快捷導(dǎo)航

一個(gè)JavaScript變量聲明的知識點(diǎn)

更新時(shí)間：2013年10月28日 09:56:02 作者：

JavaScript變量聲明很簡單，但是這里也有要學(xué)習(xí)的知識點(diǎn)，對于JavaScript基礎(chǔ)學(xué)習(xí)很重要。

上周四吃完午飯，leader發(fā)了一道JavaScript的題目給我們做，我們Team里面有做前端的，有做后臺的，也有坐mobile web的，所以大家對題目的理解各自都不一樣，然后在QQ討論組里面進(jìn)行討論。發(fā)現(xiàn)雖然很基礎(chǔ)，但是通過討論收獲不少，分享出來。當(dāng)然在有開發(fā)經(jīng)驗(yàn)的開發(fā)者看來，這些都是學(xué)習(xí)JavaScript最基礎(chǔ)的東西。因?yàn)槠綍r(shí)都是用jQuery或者第三JS組件，所以對JavaScript基礎(chǔ)學(xué)習(xí)不夠重視。題目如下，問題是：2次alert分別輸出什么結(jié)果？

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

    (function () {
        b = '-----';
        var b;
    })();
    alert( typeof b);
</script>

我的答案是：1.undefined 2.undefined。然后leader讓我們再仔細(xì)考慮一下問題答案。我對題目的分析：
1.聲明a并賦值為1，然后用重新聲明a，但是此時(shí)沒有賦值，那變量默認(rèn)值應(yīng)該為undefined。
2.b變量是在函數(shù)里面是局部變量，alert里面輸出的是全局變量b，所以為undefiend。
我自己在Chrome里面運(yùn)行了一下代碼，代碼正確結(jié)果是1.number 2.undefined。這里考察的是JavaScript的變量聲明提前概念。
我們在看另外一個(gè)例子，比如下面：

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

test();

function test(){
alert("Hello World!");
}

程序不會報(bào)錯(cuò)，而已運(yùn)行結(jié)果是：Hello World!。原理：計(jì)算機(jī)在開始執(zhí)行語句之前，會先查找所有的function定義，然后保存相關(guān)的function。
第1題：
var a = 1;
var a;
第2行聲明變量a，就相當(dāng)于在頂部聲明了a，然后第一句是重新聲明a，然后賦值為1。所以typeof a為number
第2題：
b = '-----';
var b;
第二題解析：b=‘-----'，程序首先會去查找上下文是否有變量b的聲明，如果有的話，直接賦值為'-----'。但是alert( typeof b); 是在函數(shù)外面，輸出的全局變量b，所有是undefined。
請注意：對變量的賦值操作并沒有提前。
接著看如下代碼段:

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

<script type="text/javascript">
name="aaa";
function test(){
    alert(typeof name);

    var name="bbb";
    alert(typeof name);
}
test();
</script>

請寫出結(jié)果。
分析可以寫成如下代碼段：

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

name="aaa";
function test(){
    alert(typeof name);//在函數(shù)內(nèi)部查找上下文是否有name的聲明，有聲明。但是賦值操作不能提前，所以類型為undefined
    var name="bbb";//賦值操作
    alert(typeof name);//string
}
test();

但是下面代碼段，運(yùn)行結(jié)果是什么？

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

<script type="text/javascript">
alert(typeof name);
var name="hello world";
alert(typeof name);
</script>

程序運(yùn)行結(jié)果是:string,string。這里就弄暈了，不知道怎么分析和解釋了。表明上我覺得我理解了變量聲明提前，但是用學(xué)到方法分析上面代碼段，我會得出錯(cuò)誤的結(jié)果。那么變量的賦值和在函數(shù)外部(全局變量)還是函數(shù)內(nèi)部(局部變量)有關(guān)系?

您可能感興趣的文章: