什么是 JavaScript 中的全局命名空间污染?
全局命名空间污染
污染全局命名空间会导致名称冲突。这种名称冲突在大型项目中非常常见，在这些项目中我们可能会使用多个javascript 库。让我们详细讨论一下什么是名称冲突。
让我们假设有两个团队 A1 和 A2 正在开发一个项目。他们都准备了自己的 javascript 文件，即 TeamA1.js 和 TeamA2.js，如下所示。
TeamA1.js
TeamA1 创建了一个学生函数，并具有 2 个参数 fname 和 lname(firstname 和 lastname)。
function student(fname, lname){
this.fname = fname;
this.lname = lname;
this.getFullName = function (){
return this.fname + " " + this.lname
}
}
TeamA2.js
TeamA2 创建了相同的函数(student)，并具有 3 个参数 fname、mname、lname。
function student(fname, mname, lname){
this.fname = fname;
this.mname = mname;
this.lname = lname;
this.getFullName = function (){
return this.fname + " " + this.mname + " " + this.lname;
}
}
现在创建一个 html 文件来操作上述 js 文件。将 js 文件放在 <head>标签
Html 文件
<html>
<head>
<script type = "javascript" src = "TeamA1.js"></script>
<script type = "javascript" src = "TeamA2.js"></script>
</head>
<body>
<div id = "resultDiv"></div>
<script>
document.getElementById("resultDiv").innerHTML =
new student("Rajendra", "prasad").getFullName();
</script>
</body>
</html>
如果我们运行代码，将显示以下输出。
输出
Rajendra prasad undefined
解释
我们这里有两个学生函数，一个有 2 个参数，另一个有 3 个参数。我们的目标是使用带有 2 个参数的学生函数，因此在 html 文件 中只有两个参数("Rajendra"，"prasad")已传递。但我们得到的输出是"Rajendra prasad undefined"，这意味着代码采用了带有 3 个参数的函数，而不是带有 2 个参数的函数。
这背后的原因是 javascript 不鼓励函数重载。它只是用另一个具有相同名称的函数覆盖该函数(这里是 student)。在我们的示例中，由于具有 3 个参数的函数(TeamA2.js)位于具有 2 个参数的函数(TeamA1.js)之后，TeamA2 函数覆盖了 TeamA1 函数，在输出中显示 undefined。如果两个 js 文件的位置颠倒了各自的位置，则输出将为"Rajendra prasad"。
这里我们可以说发生了名称冲突。两个团队都构建了一个具有相同名称的函数，即 student。这就是为什么不要将所有内容添加到全局命名空间非常重要的原因。如果其他人使用相同的变量或函数名称，则可能导致名称冲突。
