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

JavaScriptで名前空間の汚染を回避するには？原因と対策を実例付きで解説

名前空間の汚染を回避するには

JavaScriptは関数オーバーロードをサポートしていません。そのため、同じ名前の関数が複数定義されると、読み込まれた順序に応じて後から定義された関数が先の関数を上書きしてしまいます。これはJavaScriptに名前空間の仕組みが存在しないことを意味します。しかし、オブジェクトを利用すれば擬似的な名前空間を作成でき、名前の衝突（コンフリクト）を回避できます。

var Tutorix = Tutorix || {};

この1行は、「Tutorixオブジェクトがすでに存在する場合はそれを使い、存在しなければ新しい空のオブジェクトを作成する」という意味です。

さらに、名前空間の中に別の名前空間を入れるネストした名前空間も作成できます。

var Tutorix = Tutorix || {};
Tutorix.TeamA1 = Tutorix.TeamA1 || {};

2行目では、「TeamA1がすでに存在すればそのオブジェクトを利用し、なければ空のTeamA1オブジェクトを新規作成する」という処理を行っています。

名前の衝突が発生するケース

次の例では、HTMLファイル側で引数を2つしか渡していないにもかかわらず、出力には3つ目の値としてundefinedが含まれてしまいます。これはTeamA1とTeamA2の間で名前空間の衝突が発生しているためです（両方とも同じ関数名「student」を使用しています）。

TeamA1.js

<script>
  function student(Fname, Lname) {
    this.Fname = Fname;
    this.Lname = Lname;
    this.getFullName = function() {
      return this.Fname + " " + this.Lname;
    };
  }
</script>

TeamA2.js

<script>
  function student(Fname, Mname, Lname) {
    this.Fname = Fname;
    this.Mname = Mname;
    this.Lname = Lname;
    this.getFullName = function() {
      return this.Fname + " " + this.Mname + " " + this.Lname;
    };
  }
</script>

HTMLファイル

<html>
<head>
  <script src="TeamA1.js"></script>
  <script 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

TeamA1.jsとTeamA2.jsの間で名前空間の衝突が起きているため、TeamA1.jsを呼び出すつもりで引数「Rajendra」と「prasad」の2つだけを渡しても、出力は「Rajendra prasad undefined」となってしまいます。これは、引数を3つ受け取るTeamA2.js側の関数が、TeamA1.jsの関数を上書きしたことが原因です。

このような名前の衝突を防ぐには、オブジェクトを使って名前空間を作成する必要があります。

名前空間を使って衝突を回避する

TeamA1.js

次のコードでは、Tutorixというオブジェクトの中にTeamA1という名前空間を作成しています。

<script>
  var Tutorix = Tutorix || {};
  Tutorix.TeamA1 = Tutorix.TeamA1 || {};
  Tutorix.TeamA1.student = function(Fname, Lname) {
    this.Fname = Fname;
    this.Lname = Lname;
    this.getFullName = function() {
      return this.Fname + " " + this.Lname;
    };
    return this;
  };
</script>

TeamA2.js

同様に、Tutorixオブジェクトの中にTeamA2という名前空間を作成します。

<script>
  var Tutorix = Tutorix || {};
  Tutorix.TeamA2 = Tutorix.TeamA2 || {};
  Tutorix.TeamA2.student = function(Fname, Mname, Lname) {
    this.Fname = Fname;
    this.Mname = Mname;
    this.Lname = Lname;
    this.getFullName = function() {
      return this.Fname + " " + this.Mname + " " + this.Lname;
    };
    return this;
  };
</script>

HTMLファイル

HTMLファイルに両方のJSファイル（TeamA1.jsとTeamA2.js）を読み込みます。

<html>
<head>
  <script src="TeamA1.js"></script>
  <script src="TeamA2.js"></script>
</head>
<body>
  <script>
    document.write(window.Tutorix.TeamA1.student("Rajendra", "prasad").getFullName());
    document.write(window.Tutorix.TeamA2.student("Babu", "Rajendra", "prasad").getFullName());
  </script>
</body>
</html>

実行結果

Rajendra prasad
Babu Rajendra prasad

この例ではネストした名前空間を活用し、Tutorix名前空間の中にTeamA1とTeamA2を入れ子にすることで名前の衝突を回避しています。名前空間の衝突が解消されたことで、それぞれのスクリプトが意図した通りの正しい出力を返せるようになりました。

  1. JavaScriptで配列をreduceする方法｜reduce()メソッドで配列要素を合計する

    JavaScriptのreduce()メソッドは、配列の各要素を先頭から順に処理し、その結果を1つの値にまとめる（畳み込む）ための配列メソッドです。数値の合計を求めるだけでなく、配列からオブジェクトを組み立てたり、条件に応じてデータを集約したりと、幅広い場面で活用されています。reduce()メソッドの基本構文 { return 戻り値; }, 初期値);accumulator（アキュムレータ）：直前のコールバック関数が返した値（累積値）。最初のループでは初期値、または配列の第1要素が代入されます。currentValue：現在処理している配列の要素。初期値：累積値の出発点となる値。省略し

  2. JavaScriptでテーブルにNULL値が挿入されるのを防ぐ方法

    テーブルにNULL値が挿入されるのを防ぐには、値を入力する際に条件チェックを行う必要があります。NULLをチェックする条件は以下のように記述します。while( !( yourVariableName1==null || yourVariableName2==null || yourVariableName3==null……N){ // yourStatement1 . . N }このロジックを使用することで、NULL値が挿入されることを確実に防ぐことができます。次に、forループを使ってNULL値なしでテーブルに値を挿入します。以下がそのコードです。サンプルコ