如何防止在 JavaScript 中使用假命名空间覆盖？

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

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

    Namespace
    
    
    

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

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

文件名：script2.js

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

文件名：app.js

sayHello();
sayHi();

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

嗯，发生这种情况是因为我们在全局范围内的 script1.js 和 script2.js 中具有相同的变量名称。这就是 script2.js 覆盖 script1.js 的原因

为了解决这个问题，我们将使用命名空间的概念，如下所述，并对这些文件进行以下更改：

文件名：index.html

    Namespace
    
    
    

文件名：script1.js

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

文件名：script2.js

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

在上面的两个文件中，我们创建了一个对象，然后将名称分配给了 name 变量。通过这种方式，我们防止了任何压倒一切的问题。
文件名：app.js

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

在上面的文件中，我们使用了一个新的函数名称，它将在运行程序时被调用，您的控制台窗口将如下所示：