首頁 > 文章 > web前端 > 如何在 JavaScript 中使用立即呼叫函數表達式來防止覆寫？

如何在 JavaScript 中使用立即呼叫函數表達式來防止覆寫？

PHPz轉載: 2023-09-03 19:13:02789瀏覽

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

JavaScript 允許開發人員在網頁上新增功能和行為。開發人員需要建立多個函數和變數來為網頁的不同部分新增功能。

在開發即時應用程式時，多個開發人員在同一個專案上工作。因此，在與多個開發人員協作時避免無意中覆蓋函數和變數是必要的。在本教程中，我們將學習如何使用立即呼叫的函數表達式來防止覆蓋。

重寫問題

例如，兩個同事正在做同一個項目，並且都在程式碼內部定義了 printAge() 函數並合併了程式碼。現在，瀏覽器將只執行最後定義的函數，因為它會覆寫所有其他同名函數定義。因此，使用者有時會看到網頁的意外行為。此外，變數名稱也可能發生這種情況。

範例（覆蓋問題）

在下面的範例中，我們定義了兩個同名的變數。我們在網頁上顯示變數值。在輸出中，使用者可以觀察到第二個“a”變數覆蓋了第一個“a”變數的值。

<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 中的覆寫。

(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中文網其他相關文章！

JavaScript 对象作用域

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何使用 FabricJS 設定矩形的旋轉角度？下一篇：如何使用 FabricJS 設定矩形的旋轉角度？

看更多