資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用立即呼叫函式表示式 (IIFE) 防止 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` 物件。此外，我們為 `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 程式碼時發生覆蓋。其思想是在函式作用域中定義變數，並透過特定全域性物件全域性訪問它們，該全域性物件不應有任何重名的變數。
使用立即呼叫函式表示式防止覆蓋的主要好處是避免全域性變數名的汙染。此外，它使程式碼更易於維護並提高了程式碼的可重用性。
277 次瀏覽
