Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptのグローバル名前空間汚染とは何ですか？

グローバル名前空間汚染

グローバル名前空間を汚染すると、名前の衝突が発生します 。この名前の衝突 複数のjavascriptを使用している可能性のある大規模なプロジェクトでは非常に一般的です ライブラリ。 名前の衝突について詳しく説明しましょう です。

A1とA2という名前の2つのチームがプロジェクトに取り組んでいるシナリオを考えてみましょう。どちらもTeamA1.jsである独自のJavaScriptファイルを用意しました およびTeamA2.js 以下に示すように。

TeamA1.js

TeamA1 はstudent関数を作成し、fnameとlname（firstname＆lastname）の2つのパラメーターを持っています。

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

TeamA2.js

TeamA2 同じ関数（学生）を作成し、fname、mname、lnameの3つのパラメーターがあります。

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

次に、上記のjsファイルを操作するためのhtmlファイルを作成します。 jsファイルをタグ

に配置します

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つの学生関数があります。1つは2つのパラメーターを使用し、もう1つは3つのパラメーターを使用します。私たちの目的は、2つのパラメータで学生関数を使用することです。したがって、htmlファイルでは 2つのパラメーター（ "Rajendra"、 "prasad"）のみが渡されました。しかし、得られた出力は「Rajendra prasad undefined」です。これは、コードが2つのパラメーターを持つ関数ではなく、3つのパラメーターを持つ関数を受け取ったことを意味します。

この背後にある理由は、javascriptが関数のオーバーロードを促進しないためです。 。 オーバーライド 同じ名前の別の関数を持つ関数（ここでは学生です）。この例では、3つのパラメーターを持つ関数（TeamA2.js）が2つのパラメーターを持つ関数（TeamA1.js）の後に配置されているため、 TeamA2 関数がTeamA1をオーバーライドしました 関数、未定義を表示 出力で。 2つのjsファイルの場所がそれぞれの場所を逆にした場合、出力は「Rajendraprasad」になります。

ここでは、名前の衝突と言えます。 起こった。両方のチームは、学生と同じ名前の関数を作成しました。そのため、グローバル名前空間にすべてを追加しないことが非常に重要です。他の誰かが同じ変数または関数名を使用すると、名前の衝突が発生する可能性があります 。


  1. JavaScriptの関数式とは何ですか？

    関数式を使用すると、後で変数名を使用して呼び出すことができる変数に関数を格納できます。また、通常の関数宣言のように吊り上げられていないため、定義する前に呼び出すことはできません。 以下は、JavaScriptで関数式を実装するためのコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-wid

  2. JavaScriptのクロージャとは何ですか？

    JavaScriptのクロージャを使用すると、外部関数が実行されて返された後でも、内部関数から外部関数スコープにアクセスできます。これは、内部関数が常に外部関数変数にアクセスできることを意味します。 以下はJavaScriptのクロージャのコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device