JavaScript のグローバル変数に代わる最良の変数は何ですか?

JavaScript におけるグローバル変数の代替

グローバル変数は、ページ上の他のすべてのコードと単一の名前空間を共有するため、JavaScript では推奨されないことがよくあります。 。これにより潜在的な競合が発生し、コードの管理が困難になる可能性があります。

次の代替手段の使用を検討してください。

1.シングルトン

シングルトンは、アプリケーション内に 1 回だけ存在するオブジェクトです。これらは、データを保存したり、他の方法ではアクセスできないメソッドへのアクセスを提供したりするために使用できます。例:

const singleton = (function() {
  const myVar = 10;

  return {
    get: function() {
      return myVar;
    },
    set: function(value) {
      myVar = value;
    }
  };
})();

2.モジュール

モジュールは、特定のスコープ内のコードとデータをカプセル化する方法です。これらには、モジュールのエクスポート オブジェクトを参照するグローバル変数を通じてアクセスできます。例:

const myModule = (function() {
  const myVar = 10;

  return {
    get: function() {
      return myVar;
    },
    set: function(value) {
      myVar = value;
    }
  };
})();

モジュールにアクセスするには、myModule グローバル変数を使用します:

console.log(myModule.get()); // 10

3。依存関係の注入

依存関係の注入は、オブジェクトにその依存関係を引数として渡す手法です。これにより、依存関係を簡単に交換できるため、柔軟性とテストが向上します。例:

function MyComponent(myService) {
  this.myService = myService;
}

MyComponent.prototype.doSomething = function() {
  this.myService.doStuff();
};

この例では、MyComponent に myService オブジェクトの依存関係が渡されます。これにより、コンポーネントは、サービスのインスタンスを明示的に作成しなくても、サービスのメソッドを使用できるようになります。

4.クロージャ

クロージャは、スコープを離れた後でも、外側のスコープから変数や関数へのアクセスを保持する関数またはコード ブロックです。これは、状態を管理し、関数間でデータを渡すための強力な手法となります。例:

function counter() {
  let count = 0;

  return function() {
    return count++;
  };
}

const myCounter = counter();
console.log(myCounter()); // 0
console.log(myCounter()); // 1

この例では、カウンター関数は count 変数へのアクセスを維持するクロージャーを返します。そのため、myCounter 変数を複数回呼び出してカウントを増分したり取得したりできます。

結論

グローバル変数は便利ですが、いくつかの欠点もあります。シングルトン、モジュール、依存性注入、クロージャなどの代替手法を使用すると、JavaScript アプリケーションのカプセル化、モジュール性、テスト容易性を向上させることができます。

以上がJavaScript のグローバル変数に代わる最良の変数は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。