ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript のグローバル変数: 競合や汚染を回避するための代替手段は何ですか?

JavaScript のグローバル変数: 競合や汚染を回避するための代替手段は何ですか?

Patricia Arquette
リリース: 2024-11-30 16:06:12
オリジナル
779 人が閲覧しました

Global Variables in JavaScript: What Alternatives Exist to Avoid Conflicts and Pollution?

グローバル変数: なぜ問題があるのか​​、その代替手段を見つける方法

グローバル変数は、その潜在的な可能性のために JavaScript で広く批判されています。コードの競合や名前空間の汚染を防ぎます。代替ソリューションを求める場合は、次のオプションを検討してください。

モジュール パターン

このパターンは、変数と関数を単一のグローバル変数内にカプセル化し、名前の衝突のリスクを軽減します。 .

// Define a module
var FOO = (function() {
  // Private variables and functions here
  return {
    // Public functions and methods accessible outside the module
  };
})();
ログイン後にコピー

パブリック関数にアクセスするには、FOO. を使用します。プライベート変数と関数はモジュールの外部ではアクセスできないため、名前空間の汚染を防ぎます。

引数とクロージャ

関数がデータを共有する必要があるが、グローバル変数に依存しない場合は、引数を渡すかクロージャを使用することを検討してください。クロージャを使用すると、外側のスコープが終了した後でも、関数は外側のスコープで定義された変数にアクセスできます。

// Function assign value to a variable
function f(name) {
  var variable = name;
  return function() {
    // Inner function returns value of variable
    return variable;
  };
}

// Create a function that returns the value of variable
var ret = f("value");
alert(ret()); // Output: "value"
ログイン後にコピー

シングルトン パターン

シングルトン パターンでは、インスタンスが 1 つだけであることが保証されます。のクラスが作成されます。これは、複数の関数が共有変数へのアクセスを必要とする状況で有益です。

// Singleton class
var Singleton = (function() {
  var instance;
  function getInstance() {
    if (!instance) {
      instance = new Object();
    }
    return instance;
  }
  return {
    getInstance: getInstance
  };
})();

// Get instance of class
var globalVars = Singleton.getInstance();
// Set variable in instance
globalVars.variable = "value";
// Access variable later
alert(globalVars.variable); // Output: "value"
ログイン後にコピー

これらの代替案には、それぞれ長所と短所があることに注意してください。適切なオプションの選択は、アプリケーションの特定の要件によって異なります。

以上がJavaScript のグローバル変数: 競合や汚染を回避するための代替手段は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート