如何防止重複宣告 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+ 次瀏覽

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告