JavaScript 變數和函數提升問題總結

-Advertisement-

一　什麼是JavaScript 變數提升？ -- JS程式運行時，（a）變數的聲明會被解釋器"提升"到方法體內的頂部，初始化賦值操作不提升按順序執行（b）函數體內未聲明的變數，解釋器會在函數體外聲明變數，成為全局變數（c）聲明過的函數，整個函數體會被解釋器提升到方法體的頂部，初始化賦值操作按順 ...

一　什麼是JavaScript 變數提升？

-- JS程式運行時，

（a）變數的聲明會被解釋器"提升"到方法體內的頂部，初始化賦值操作不提升按順序執行

（b）函數體內未聲明的變數，解釋器會在函數體外聲明變數，成為全局變數

（c）聲明過的函數，整個函數體會被解釋器提升到方法體的頂部，初始化賦值操作按順序執行

1-1　變數提升

eg：變數的聲明提升，初始化賦值不提升。

<script>
    console.log(a);    // undefined
    var a=3;           // 若沒有var聲明，會報錯 a is not defined
    console.log(a);    // 3
    function fn() {　
      console.log(a);  // undefined　　
      var a = 'a';　　 //此a為局部變數，沒有這一句上下輸出的結果都變為3
      console.log(a);  // a
    }
    fn();
    console.log(a);    // 3
</script>

上述代碼相當如下：

<body>
 <script>
    var a;
    console.log(a);    // undefined
    a=3;               // 若沒有var聲明，會報錯 a is not defined
    console.log(a);    // 3
    function fn() {　
      var a;　
      console.log(a);  // undefined　　
      a = 'a';　　      //沒有這一句上下輸出的結果都變為3
      console.log(a);  // a
    }
    fn();
    console.log(a);  // 3
  </script>
</body>

對比改掉函數中a的var聲明

<script>
    console.log(a);    // undefined
    var a=3;           // 若沒有var聲明，會報錯 a is not defined
    console.log(a);    // 3
    function fn() {　
      console.log(a);  //變成了 3　　
      a = 'a';　　     //此a變成全局變數，沒有這一句上下輸出的結果都變為3
      console.log(a); // a
    }
    fn();
    console.log(a);  //變成了 a
</script>

上述代碼相當如下：

 <script>
    console.log(a);    // undefined
    var a=3;           // 若沒有var聲明，會報錯 a is not defined
    console.log(a);    // 3
    var a;
    function fn() {　
      console.log(a);  // 3　　
      a = 'a';　　      //沒有這一句上下輸出的結果都變為3
      console.log(a);  // a
    }
    fn();
    console.log(a);    // a
 </script>

ps：所以為避免調用函數後，可能修改了外部的變數，函數內的變數都要聲明初始化，規範化。

1-2 函數提升

eg：聲明式函數將整個函數體提升到頂部，字面量式函數只提升聲明過的變數

<script>
    console.log(f1);         //function f1() {}
    console.log(f2);         //undefined
    function f1() {}
    var f2 = function () {}; //若沒有var聲明，上面結果報錯f2 is not defined
    console.log(f2);         //function () {}
</script>

上述代碼相當如下：

<script>
    function f1() {}         //提前
    var f2;                  //提前
    console.log(f1);         //function f1() {}
    console.log(f2);         //undefined
    f2 = function () {};     //若沒有var聲明，上面結果報錯f2 is not defined
    console.log(f2);         //function () {}
</script>

ps：為避免出現一些意料不到的變數提升的錯誤，在每一個變數的作用域開始之前，聲明並初始化變數，留意函數體中未聲明的變數自動變成全局變數後，導致的種種情況

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

Cookie防篡改機制

一、為什麼Cookie需要防篡改為什麼要做Cookie防篡改，一個重要原因是 Cookie中存儲有判斷當前登陸用戶會話信息（Session）的會話票據 SessionID和一些用戶信息。當發起一個HTTP請求，HTTP請求頭會帶上Cookie，Cookie裡面就包含有SessionID。後端 ...
canvas學習筆記（一）

canvas是HTML5的新元素之一。使用canvas可以直接在HTML上進行圖形操作，所以它具有極大的應用價值。canvas元素本身不具有繪圖能力，它需要藉助JavaScript來實現繪圖功能。 canvas的限制： canvas繪製的圖形是靜態的，如果要讓所畫的圖形動起來，則需要畫出每一幀的圖形 ...
canvas之背景特效

需具備js基礎知識以及canvas相關方法(可查閱相關文檔) 下麵是一篇有關js與canvas的背景特效基於面向過程的思維 ...
Vue.js 相關知識（路由）

1. 簡介路由，工作原理與路由器相似（路由器將網線匯流排的IP分發到每一臺設備上），Vue中的路由根據用戶在網頁中的點擊，將其引導到對應的頁面。 2. 使用步驟安裝vue-router或者直接引入vue-router.js（下載地址：https://router.vuejs.org/）例：SPA ...
初識HTML和WEB標準

什麼是 HTML？ * HTML 超文本標記語言的縮寫(**H**yper **T**ext **M**arkup **L**anguage) * HTML 並不是編程語言，而是一種標記語言(markup language) * 標記 <英文單詞或者字母>稱為標記，一個HTML頁面都是由各種標記組... ...
jquery方法.serializeArray()獲取name和value並轉為json數組

jquery的.serializeArray()方法可以獲取形如以下 name value組成的對象數組，如果我們想得到key為name,value為value的json對象，則如下轉換：但是這麼轉換有一個弊端，就是checkbox，覆選框有多個name相同的值，最後只留下了最後一個，如果想把覆選 ...
【百度地圖API】如何給自定義覆蓋物添加事件

摘要：給marker、lable、circle等Overlay添加事件很簡單，直接addEventListener即可。那麼，自定義覆蓋物的事件應該如何添加呢？我們一起來看一看~ 一、定義構造函數並繼承Overlay 二、初始化自定義覆蓋物三、繪製覆蓋物四、添加覆蓋物五、給自定義覆蓋物添加事 ...
Vue.js 相關知識（動畫）

1. 簡介 Vue 在插入、更新或移除 DOM 時，提供多種不同方式的過渡效果，並提供 transition 組件來實現動畫效果（用 transition 組件將需執行過渡效果的元素包裹）語法：<transition name=””>元素或組件（進入或離開時會有動畫效果）</transition> ...