一個JavaScript變量聲明的知識點

2019-11-20 21:50:30

字體：大中小

來源：轉載

供稿：網友

上周四吃完午飯，leader發了一道JavaScript的題目給我們做，我們Team里面有做前端的，有做后臺的，也有坐mobile web的，所以大家對題目的理解各自都不一樣，然后在QQ討論組里面進行討論。發現雖然很基礎，但是通過討論收獲不少，分享出來。當然在有開發經驗的開發者看來，這些都是學習JavaScript最基礎的東西。因為平時都是用jQuery或者第三JS組件，所以對JavaScript基礎學習不夠重視。題目如下，問題是：2次alert分別輸出什么結果？

復制代碼代碼如下:

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

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

復制代碼代碼如下:

test();

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

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

復制代碼代碼如下:

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

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

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

復制代碼代碼如下:

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

但是下面代碼段，運行結果是什么？

復制代碼代碼如下:

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

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

上一篇：將json當數據庫一樣操作的javascript lib

下一篇：Javascript實現頁面跳轉的幾種方式分享

學習交流

索泰發布一款GTX 1070 Mini迷你版本:小機

索泰發布一款GTX 1070 Mini迷你版本:小機箱大愛...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注

新聞熱點

榮耀總裁趙明烏鎮演講：榮耀首款5G手機V30下月發布

2019-10-23 09:17:05

搜狐張朝陽：回歸媒體是搜狐重新崛起的關鍵

2019-10-21 09:20:02

華為輪值董事長郭平：虛擬技術創造現實價值

2019-10-21 09:00:12

滴滴英文服務上線兩周年用戶已超200萬

2019-09-26 08:57:12

華為推出全球至快AI訓練集群Atlas900

2019-09-25 08:46:36

馬斯克：特斯拉正組建中國技術團隊

2019-09-25 08:15:43

疑難解答

圖片精選

網友關注