js聲明變量的三種方式

JS 聲明變量的三種方式

（1）使用變量步驟：a.聲明-->b.賦值-->3.調用

正確用法：

<script type="text/javascript">
   // 方式一：聲明和賦值不分離
   var correctUsage = "正確使用變量的方式一";
    alert(correctUsage); //可以彈出來該變量所對應的值
    // 方式二：聲明和賦值分離
    var correctUsage2;
    correctUsage2 = "正確使用變量的方式二";
    alert(correctUsage2);
</script> 

錯誤用法：

<script type="text/javascript">
   var correctUsage;
    // 錯誤一： 沒有賦值就使用
    alert(correctUsage); //underfined
    // 錯誤二：沒有賦值就拼接字符串
    correctUsage += "沒有賦值就改值";
    alert(correctUsage); //undefined沒有賦值就改值
</script> 

（2）變量的產生與死亡

   已使用var關鍵詞聲明表裏爲例

  2.1 聲明在函數外部的變量

   產生：js加載到該變量所在行時產生

   死亡：js代碼加載完畢，變量死亡

   2.2聲明在函數內部的變量

    前提：該變量所在的函數被調用

    產生：js執行到該變量所在行時產生

    死亡： 該變量所在的函數執行行結束

    舉例：

     情景一：函數只聲明，不調用

<script type="text/javascript">
  function test(){
     var aa = "test";
     aa +="只聲明，但不調用該函數時，該函數會不會執行？"; //添加內容
     alert(aa);
     aa = "該函數的變量不會執行！";
     alert(aa);
}
</script> 

   說明：上面2個alert不會執行

   情景二：聲明並調用該函數

  function test(){
     var aa = "test";
     aa +="只聲明，但不調用該函數時，該函數會不會執行？"; //添加內容
     alert(aa);
     aa = "該函數的變量不會執行！";
     alert(aa);
   }
   test();

說明：上面2個alert均會執行

（3）全局變量與局部變量

     3.1全局變量

     聲明在函數體外，任何地方均可訪問到該變量

      3.2局部變量

      聲明在函數體內，只有在函數體內可訪問到該變量

 （4）聲明變量的3種方式及做用域

      4.1使用var (最多見）

      var聲明的變量能夠是全局的（函數外面），也能夠是函數級的（函數內部）

function test() {
  globalVar = "這是一個全局變量";
  var partialVar = "這是一個局部變量";
}
test();
alert(globalVar); //這是一個全局變量
alert(partialVar);  //直接報錯

說明：函數內部聲明變量的時候，必定要使用var命令，若是不用的話，你實際上聲明瞭一個全局變量

情景一：

var varLocation = "函數外部聲明並賦值";
function test(){
  varLocation = "函數內部改值";
   alert(varLocation); // 函數內部改值
}
test();
alert(varLocation);  // 函數內部改值

說明：函數外面聲明的變量，在函數內部改變該值後，函數外面的該變量的值也隨之改變

情景二：

var varLocation = "函數外部聲明並賦值";
function test(){
   var  varLocation = "函數內部改值";
   alert(varLocation); // 函數內部改值
}
test();
alert(varLocation);  // 函數內部改值

說明：在函數外面使用var聲明一個變量後，再在函數內部使用var再次聲明一次並改變其值，函數外面的該變量的值不會發生改變。 

4.2 使用const

　　const用於修飾常量，定義的變量不可修改，並且必須初始化，聲明位置不限（一般聲明在js開頭），與java類的final關鍵字性質同樣

舉例：

function test(){
  const testConstant = "測試常量";
  alert(testConstant);
  testConstant = "改變常量值";
}
test();

4.3 使用let

let聲明的變量在{}中使用，變量的做用域限制在塊級域中

舉例：使用js動態給ul添加li對象並點擊第幾項，顯示當前點擊是第幾個

window.onload = function(){
   var ul = document.getElementById("ulList");
   for(var i = 0 i <= 5; i++){
      // 建立一個li對象
      var li = document.createElement("li");
       // li標籤內內容設置爲：Itemi
       li.appendChild(document.createTextNode("Item" + i));
       // 聲明一個塊級變量j，並將i賦給j
       let j = i;
        // 綁定點擊事件
        li.onclick = function(){
            alert("Item" + i + "is clicked.");
         };
         ul.appendClild(li);
     }
}

       

錯誤方式：

window.onload = function(){
   var ul = document.getElementById("ulList");
   for(var i = 0 i <= 5; i++){
      // 建立一個li對象
      var li = document.createElement("li");
       // li標籤內內容設置爲：Itemi
       li.appendChild(document.createTextNode("Item" + i));

        // 綁定點擊事件
        li.onclick = function(){
            alert("Item" + i + "is clicked.");
         };
         ul.appendClild(li);
     }
}

結果：點擊每一個li，提示的都是「Item 6 is clicked.」

擴展：使用var如何實現這種效果？閉包

window.onload = function(){
   var ul = document.getElementById("ulList");
   for(var i = 0 i <= 5; i++){
      // 建立一個li對象
      var li = document.createElement("li");
       // li標籤內內容設置爲：Itemi
       li.appendChild(document.createTextNode("Item" + i));

        // 綁定點擊事件
        li.onclick = (function(i){
            return function (){
            alert("Item" + i + "is clicked.");
         };
      })(i) // 閉包
       // 將LI對象item拼接到UL標籤體內
       ul.appendClild(li);
     }
}

說明：採用的閉包的方式在綁定的時候已經把j的值已經傳遞給對應的click事件了，因此可以實現相同的結果，可是，從程序的可維護性來講不推薦使用。 

4.4 聲明變量的要項　　

4.4.1 js聲明的變量取值的原則：就近原則；

4.4.2 js是弱類型語言，不一樣的數據類型能夠用同一個變量名錶示；

4.4.3 函數內部聲明的變量，不會影響函數外部同名的變量的值。

舉例：

 

var testVarValue = "測試就近原則";
<script type="text/javascript">
      function test() {
       const testRepeatStatement = "測試用一個變量賦予不一樣的類型及不一樣的值";
       alert(testRepeatStatement);  //測試用一個變量賦予不一樣的類型及不一樣的值
   }
   test();
</script>

 

（5）如何避免全局污染？　 

 方法：閉包

 舉例：

(function(){

// 聲明一個JSON對象

var JsonObj = {};

//定義該對象的屬性及屬性值

JsonObj.name = "對象的屬性";

JsonObj.method = function() {

   alert("測試是否可以調用該方法");

   return JsonObj.name;

}

// 經過操做window對象，供外部訪問該對象的屬性和方法

window.GlobalObj = JsonObj;

})();

// 調取該對象的方法並接受返回值

var name = GlobalObj.method(); // 獲取的是返回值name

alert(name); //對象屬性

//  只獲取該方法但不調用

var method = GlobalObj.method; // 獲取的是對象GlobalObj2的method1()方法

alert(method);

// function (){

//  alert("測試是否可以調用該方法");

//   return JsonObj.name;

//}

// 調用接受到的方法，但不接受返回值

method();

閉包的優缺點說明：

優勢：設計私有的方法和變量，保護函數內的變量安全；

弊端：閉包有一個很是嚴重的問題，那就是內存浪費問題，這個內存浪費不單單由於它常駐內存，更重要的是，對閉包的使用不當會形成無效內存的產生。