如何防止重复声明 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+ 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告
© . All rights reserved.