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 中使用立即调用函数表达式来防止覆盖？的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 如何在 JavaScript 中使用立即调用函数表达式来防止覆盖？
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
