如何防止重複宣告JavaScript變數？

在本教程中，我們將瞭解幾種防止重複宣告JavaScript變數的方法，並比較它們，以便理解哪種方法在給定上下文中更合適。

防止重複宣告變數的最佳方法是避免建立全域性變數。

讓我們繼續討論這個問題。

將程式碼包裝在函式中

這裡，在函式內宣告的變數在函式外部不可訪問，反之亦然。使用者可以按照以下語法使用此方法。

語法

(function(){
   var varNam = "test";
}())

這裡varNam被包裝在一個函式內。

示例

在這個程式中，我們有一個名為test的變數被包裝在一個函式內。我們可以在函式內部訪問它。當用戶嘗試在函式外部訪問此變數時，我們在catch塊中得到一個錯誤。

<html>
<head>
   <title>A program that prevents duplicate variable declaration by wrapping code within a function.</title>
</head>
<body>
   <p id="prevDupInp"></p>
   <div id="prevDupOpWrap">
      <p>Click this button to access the same variable outside the function</p>
      <button id="prevDupBtn" onclick="doAccessVariable()">Click Here</button>
   </div>
   <p id="prevDupOut"></p>
   <script>
      function displayInput() {
         (function() {
            var prevDupInpEl = document.getElementById("prevDupInp");
            var prevDupInpDat = "variableName inside the function - ";
            var variableName = "test";
            prevDupInpEl.innerHTML = prevDupInpDat + variableName;
         }())
      }
      displayInput();
      function doAccessVariable() {
         var prevDupOutEl = document.getElementById("prevDupOut");
         var prevDupOutDat = "variableName outside the function - ";
         var prevDupBtnEl = document.getElementById("prevDupBtn");
         try {
            prevDupOutEl.innerHTML = prevDupOutDat + variableName;
         } catch (e) {
            prevDupOutEl.innerHTML = prevDupOutDat + e;
         }
         prevDupOpWrap.style.display = "none";
      }
   </script>
</body>
</html>

使用JavaScript的use strict指令

use strict指令表示JavaScript程式碼必須在嚴格模式下執行。嚴格指令不是語句，而是一個常量表達式。早期的JavaScript版本忽略了這個表示式。

在嚴格模式下編寫程式碼時，我們不能使用未宣告的變數。除了IE9及以下版本，所有現代瀏覽器都支援此JavaScript指令。嚴格模式允許我們編寫更簡潔的程式碼，因為它在我們程式中使用未宣告的變數時會丟擲錯誤。

“use strict”是一個字串。要啟用嚴格模式，我們需要在指令碼的開頭寫入此字串。在開頭寫入意味著它具有全域性作用域。

使用此JavaScript指令的優點是我們可以獲得安全的程式碼。以前會忽略錯誤的語法。例如，以前錯誤鍵入的變數名會變成全域性變數。在嚴格模式下，它會為此變數給出錯誤，我們可以糾正它。嚴格模式也用於函式。

使用者可以按照以下語法使用此方法。

語法

'use strict';
const v = "Strict";

這裡，語法中的第一行是指令，v是一個遵循嚴格模式的變數。

示例

在這個程式中，我們有一個未宣告的變數p。在非嚴格模式下，我們可以在輸出中顯示它。當用戶選擇嚴格模式時，我們無法顯示其值。相反，它會在catch塊中丟擲一個錯誤。

<html>
<head>
   <title>JavaScript program that prevents duplicate variable declaration using the JavaScript strict mode.</title>
</head>
<body>
   <p>Prevents duplicate variable declaration using the JavaScript strict mode</p>
   <p id="useStrictInp"></p>
   <div id="useStrictOutWrap">
      <p>Click this button to enter strict mode</p>
      <button id="useStrictBtn" onclick="getStrictMode();">Click Here</button>
   </div>
   <p id="useStrictOut"></p>
   <script>
      var useStrictEl;
      var useStrictData;
      var useStrictWrap = document.getElementById("useStrictOutWrap");
      function getStrictMode(){
         "use strict";
         try{
            x = 10;
            useStrictData = "Undeclared variable in strict mode - 
" + p;
         }
         catch(e){
            useStrictData = "Undeclared variable in strict mode - 
" + e;
         }
         useStrictEl = document.getElementById("useStrictOut");
         useStrictEl.innerHTML = useStrictData;
         useStrictWrap.style.display = "none";
      }
      function noStrict(){
         y = 10;
         useStrictEl = document.getElementById("useStrictInp");
         useStrictData = "Undeclared variable in normal mode - 
" + q;
         useStrictEl.innerHTML = useStrictData;
      }
      noStrict();
   </script>
</body>
</html>

使用let關鍵字宣告具有塊級作用域的變數

我們可以使用此方法來防止在迴圈內重複宣告JavaScript變數。

當在多個迴圈中使用相同的變數時，我們會收到宣告警告。我們可以使用關鍵字let來宣告變數以防止這種情況。使用let宣告的變數具有塊級作用域。

使用者可以按照以下語法使用此方法。

語法

for(let j=0;j<3;j++){ 
   //block1
   for(let j=0;j <4;j++){
      //block2
   }
}

這裡，我們有兩個具有不同作用域的單獨程式碼塊。

示例

在這個例子中，我們有一個長度為4的外迴圈和一個長度為5的內迴圈。首先，我們嘗試使用var變數宣告來顯示迴圈。這裡我們只顯示一次迴圈值。接下來使用者請求let宣告。這裡我們得到4次迴圈值顯示。這是這裡正確的迴圈執行。

<html>
<body>
   <p id="letDeclInp"></p>
   <div id="letDeclWrap">
   <p>Click this button to use the let keyword</p>
   <button id="letDeclBtn" onclick="blockScope(true)">Click Here</button>
   </div>
   <p id="letDeclOp"></p>
   <script>
      function blockScope(isLet){
         var letDeclSel = isLet ? "letDeclOp" : "letDeclInp";
         var letDeclEl = document.getElementById(letDeclSel);
         var letDeclBtn = document.getElementById("letDeclBtn");
         var letDeclWrap = document.getElementById("letDeclWrap");
         var letDeclDat = isLet? "Same loop variable: 4 times outer loop and 5 times inner loop using let declaration - " : "Same loop variable: 4 times outer loop and 5 times inner loop using var declaration - ";
         if(isLet){
            for(let j=0;j<3;j++){
               for(let j=0;j<4;j++){
                  letDeclDat+= j;
               }
               letDeclDat+= "
";
            }
         }
         else{
            for(var j=0;j<3;j++){
               for(var j=0;j<4;j++){
                  letDeclDat+= j;
               }
               letDeclDat+= "
";
            }
         }
         letDeclEl.innerHTML = letDeclDat;
         if(isLet)
         letDeclWrap.style.display = "none";
      }
      blockScope(false);
   </script>
</body>
</html>

本文幫助我們學習如何防止重複宣告變數。首先，我們將變數包裝在函式內以避免從外部訪問它。

其次，我們使用嚴格的JavaScript指令透過丟擲異常來防止重複變數。

最後一種方法是在迴圈中使用let關鍵字變數宣告。

我們建議函式包裝方法作為最佳方法。

更新於：2022年9月14日

1000+ 次瀏覽

啟動您的職業生涯

透過完成課程獲得認證

開始學習
廣告