グローバル変数の問題

4802 ワード
テキストリンク

既存のブログの内容をDevelopgに移行した記事です.

1.変数のライフサイクル


  • ゾーン変数のライフサイクル
    ゾーン変数のライフサイクルは、関数のライフサイクルと一致します.
    var a = "전역변수";

function local_test() {
  console.log(a);
  var a = "지역변수";
  return a;
}
    上のコードではconsole.log(a)出力undefined,関数内部のvar a
    これは、まずhoistingとして宣言され、定義されていない場合に出力されるためです.

    • 2.グローバル変数のライフサイクル


    グローバル変数のライフサイクルは、グローバルオブジェクトのライフサイクルと一致します.
    전역 객체:
런타임 이전에 자바스크립트 엔진에 의해 생기는 특수한 객체.
전역 객체에는 표준 빌트인 객체, 환경 호스트 객체들이 들어간다.

    3.グローバル変数の問題


  • 無名の結合
    すべてのコードは、グローバル変数を参照および変更できます.

  • ロングライフサイクル
    ライフサイクルが長いため、多くのリソースを消費し、価格を変更する可能性があります.

  • スキャンチェーンの終点に存在する
    グローバル変数の検索が最も遅いため、変数の検索速度が最も遅い.

  • ネーミングスペース汚染
    ファイルが切断されていても、グローバルスキャンが共有されます.
    変数値が汚染される確率が高い.

    • 4.グローバル変数を無効にする方法


  • インスタント実行関数
    関数定義と同時に呼び出されるインスタント実行関数には、独立したスキャンがあります.

  • ネームスペースオブジェクト
    方法は、グローバルにネーミングスペースロールのオブジェクトを作成し、グローバル変数を追加することです.しかし、ネーミングスペース自体はグローバル変数であるため、あまり役に立たない.

  • モジュールモード
    変数とインスタント実行関数を使用してモジュールを作成します.グローバル変数を抑制したり、カプセル化したりすることができます.(Javaのpublic、private、protected)
    const calc = (function () {
  // private 변수
  var num = 0;

  // 외부로 공개할 데이터나 메소드
  return {
    sum(x, y) {
      return x + y;
    },
    minus(x, y) {
      return x - y;
    },
  };
})();

console.log(calc.sum(2, 3)); /// 5

  • ES 6モジュール
    type=「module」ツリーをscriptラベルに追加すると、ロードされたJavaScriptファイルがモジュールとして動作します.
    • 参考資料:poiemaweb。com
    JSP - chapter01(2)
    つなぎ島