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

覆盖基本上是当您定义多个具有相同名称的函数或变量时，最后一个定义的将覆盖所有先前定义的函数，并且每次调用函数，最后一个定义的将被执行。当您的页面中有多个 javascript 文件时，通常会发生覆盖。它可以是外部文件，也可以是您在内部创建的文件。这通常是由于全局作用域中存在同名的变量或函数而发生的。

假设我们有以下文件：
文件名：index.html

    IIFE
    
    
    

此文件已链接 script1.js、script2.js 和 app.js 作为外部 javascript 文件，如下所示：

文件名：script1.js

var arsalanGreeter = {};
arsalanGreeter.name = "Arsalan";
var greeting = "Hello ";
arsalanGreeter.sayHello = function() {
    console.log(greeting + arsalanGreeter.name);
}

文件名：script2.js

var johnGreeter = {}
johnGreeter.name = "John";
var greeting = "Hi ";
johnGreeter.sayHi = function() {
    console.log(greeting + johnGreeter.name);
}

文件名：app.js

arsalanGreeter.sayHello();
johnGreeter.sayHi();

这里 app.js 负责调用 script1.js 和 script2.js 中的函数，您将在控制台窗口中得到如下输出，如下所示：

嗯，发生这种情况是因为我们在 script1.js 和 script2.js 中有相同的变量名作为“greeting”。这就是 script2.js 覆盖 script1.js 的原因。

为了解决这个问题，我们将使用立即调用函数表达式 (IIFE)的概念，如下所述：

现在我们的文件看起来像这样：
文件名：index.html

    IIFE
    
    
    

文件名：script1.js

(function (window) {
   var arsalanGreeter = {};
   arsalanGreeter.name = "Arsalan";
   var greeting = "Hello ";
   arsalanGreeter.sayHello = function() {
       console.log(greeting + arsalanGreeter.name);
   }
   window.arsalanGreeter = arsalanGreeter; 
})(window);

文件名：script2.js

(function (window) {
   var johnGreeter = {};
   johnGreeter.name = "John";
   var greeting = "Hi ";
   johnGreeter.sayHi = function() {
    console.log(greeting + johnGreeter.name);
   }
   window.johnGreeter = johnGreeter; 
})(window);

在上面的两个文件中，我们创建了 IIFE 并传递给 window 变量并调用它。
文件名：app.js

arsalanGreeter.sayHello();
johnGreeter.sayHi();

完成上述添加立即调用函数表达式的更改后，控制台的输出将如下所示：