什么是JavaScript中的全局名称空间污染?

全球命名空间污染

污染全局命名空间会导致名称冲突。在我们可能使用多个javascript 库的大型项目中,这种名称冲突非常常见。让我们详细讨论什么是名称冲突

让我们假设一个场景,其中两个名为A1和A2的团队正在一个项目上。他们俩都准备了自己的JavaScript文件,即TeamA1.jsTeamA2.js,如下所示。

TeamA1.js

TeamA1 创建了一个学生函数,并具有2个参数fname和lname(名字和姓氏)。

function student(fname, lname){
   this.fname = fname;
   this.lname = lname;
   this.getFullName = function (){
      return this.fname + " " + this.lname
   }
}

TeamA2.js

TeamA2 创建了相同的功能(学生),并具有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个参数。我们的目标是使用具有两个参数的学生函数,因此在html文件中仅传递了两个参数(“ Rajendra”,“ prasad”)。但是我们得到的输出是“ Rajendra prasad undefined”,这意味着代码采用的是具有3个参数的函数,而不是具有2个参数的函数。 

这背后的原因是javascript不会鼓励函数重载。它只是用另一个具有相同名称的功能(此处为学生)覆盖该功能。在我们的示例中,由于具有3个参数的函数(TeamA2.js)已放置在具有2个参数的函数(TeamA1.js)之后,因此TeamA2函数覆盖了TeamA1函数,在输出中显示未定义。如果两个js文件的位置颠倒了各自的位置,则输出将为“ Rajendra prasad”。 

在这里我们可以说名称冲突发生了。两个团队都构造了一个具有与学生同名的功能。这就是为什么不将所有内容添加到全局命名空间非常重要。如果其他人使用相同的变量或函数名称,则可能导致名称冲突