如何在 JavaScript 中使用立即调用函数表达式来防止覆盖？-js教程-PHP中文网

如何在 JavaScript 中使用立即调用函数表达式来防止覆盖？

PHPz

发布： 2023-09-03 19:13:02

转载

941人浏览过

如何在 javascript 中使用立即调用函数表达式来防止覆盖？

JavaScript 允许开发人员向网页添加功能和行为。开发人员需要创建多个函数和变量来向网页的不同部分添加功能。

在开发实时应用程序时，多个开发人员在同一个项目上工作。因此，在与多个开发人员协作时避免无意中覆盖函数和变量是必要的。在本教程中，我们将学习如何使用立即调用的函数表达式来防止覆盖。

重写问题

例如，两个同事正在做同一个项目，并且都在代码内部定义了 printAge() 函数并合并了代码。现在，浏览器将仅执行最后定义的函数，因为它会覆盖所有其他同名函数定义。因此，用户有时会看到网页的意外行为。此外，变量名也可能发生这种情况。

示例（覆盖问题）

在下面的示例中，我们定义了两个同名的变量。我们在网页上显示变量值。在输出中，用户可以观察到第二个“a”变量覆盖了第一个“a”变量的值。

立即学习“Java免费学习笔记（深入）”；

<html>
<body>
   <h2> Visualizing the overriding in JavaScript </h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      var a = "Hello World!";
      var a = "Hi World!";
      output.innerHTML = "The value of a is " + a;
   </script>
</body>
</html>

登录后复制

立即调用函数防止覆盖的解决方案

JavaScript 函数具有函数内部定义的变量的功能范围。因此，无论我们在函数内部定义什么变量，我们都无法在函数外部访问它们。因此，我们可以定义范围仅限于函数的变量。

我们可以使用立即调用函数来解决函数重写，即定义函数后立即执行。因此，我们不需要定义函数名称，并且可以防止重写。

语法

用户可以按照以下语法使用立即调用函数来防止 JavaScript 中的覆盖。

无阶未来模型擂台/AI 应用平台

无阶未来模型擂台/AI 应用平台，一站式模型+应用平台

查看详情

(function () {
   // write JavaScript code here. 
})();

登录后复制

在上面的语法中，我们在括号内添加了函数表达式。此外，我们在函数定义后添加了括号以立即调用该函数。

示例（防止使用立即调用函数覆盖）

在下面的示例中，我们定义了两个立即调用的函数。在每个函数中，我们创建一个“obj”对象变量并存储 id、user 和age 属性。此外，我们将 printAge() 函数存储在对象中。

两个对象的 printAge() 函数打印不同的消息。之后，我们将这两个对象存储在 window 对象中以便全局访问它们。最后，我们执行了两个对象的 printAge() 方法，用户可以观察到它打印了原始消息，而没有相互覆盖。

<html>
<body>
   <h3> Preventing the overriding <i> using the Immediately Invoked Function Expression </i> in JavaScript
   </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById("output");
      (function (window) {
         var obj = {};
         obj.id = "123";
         obj.user = "Shubham";
         var age = "Shubham's Age is 23. <br>";
         obj.printAge = function () {
            output.innerHTML += age;
         }
         window.user1 = obj;
      })(window);
      (function (window) {
         var obj = {};
         obj.id = "342";
         obj.user = "Mukund";
         var age = "Mukund's Age is 18. <br>";
         obj.printAge = function () {
            output.innerHTML += age;
         }
         window.user2 = obj;
      })(window);
      user1.printAge();
      user2.printAge();
   </script>
</body>
</html>

登录后复制

示例

在此示例中，我们还定义了两个立即调用的函数表达式。在第一个表达式中，我们定义了食物对象。此外，我们还为 food 对象定义了 setId() 和 setName() 方法，并将其存储在 window 对象中。

在第二个函数表达式中，我们再次定义了 setId() 和 setName() 方法并将它们存储在 watch() 对象中。之后，我们以 watch 和 food 对象为参考来访问不同的方法。在输出中，我们可以看到它打印了原始消息而不覆盖它。

<html>
<body>
   <h3> Preventing the overriding <i> using the Immediately Invoked Function Expression </i> in JavaScript </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById("output");
      (function (window) {
         // preparing food data
         var food = {};
         var setId = function () {
            return Date.now();
         }
         var setName = function () {
            return "Apple";
         }
         window.food = {
            setId: setId(),
            setName: setName()
         };
      })(window);
      (function (window) {
      
         // preparing watch data
         var watch = {};
         var setId = function () {
            return Date.now();
         }
         var setName = function () {
            return "Titan";
         }
         window.watch = {
            setId: setId(),
            setName: setName()
         };
      })(window);
      
      // printing values of object
      output.innerHTML = "Food Id: " + food.setId + "<br/>" + "Food Name: " + food.setName + "<br/>" + "Watch Id: " + watch.setId + "<br/>" + "Watch Name: " + watch.setName;
   </script>
</body>
</html>

登录后复制

我们学会了在使用 JavaScript 代码时使用立即调用函数表达式来防止覆盖。这个想法是在函数作用域中定义变量并通过特定的全局对象全局访问它们，该对象不应该有任何覆盖名称。

使用立即调用函数表达式防止覆盖的主要好处是避免变量名称的全局污染。此外，它还使我们能够使代码变得可维护并提高代码的可重用性。

以上就是如何在 JavaScript 中使用立即调用函数表达式来防止覆盖？的详细内容，更多请关注php中文网其它相关文章！