数据结构
网络
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 次浏览
