14 Global Variable

9985 ワード

グローバル変数の盲目的な使用は危険です.
グローバル変数を使用する必要がない理由がない場合は、領域変数を使用する必要があります.
変数は宣言によって作成され、割り当てによって値が取得されます.
変数には、生成および消失のライフサイクルlife cycleがあります.
変数は、宣言された場所で生成され、消滅します.
グローバル変数のライフサイクルは、アプリケーションのライフサイクルと同じです.
関数内部で宣言された領域変数は、関数が呼び出されたときに作成され、関数の終了時に破棄されます.
ゾーン変数のライフサイクルは、関数のライフサイクルと一致します.
// 14-01
function foo() {
  var x = 'local';  //  ┐
  console.log(x);   // x의 life cycle
  return x;         //  ┘
}

foo();          // local
console.log(x); // ReferenceError: x is not defined
変数は、1つの値を格納するために保持されるメモリ領域自体であってもよいし、
そのメモリスペースを認識するために付けられた名前です.
変数のライフサイクルはメモリ領域から解放されます.
メモリ領域が解放され、使用可能なメモリプールに戻るまで.(201p)
変数は、自分が登録したスキャンプログラムが破棄されるまで有効です.
割り当てられたメモリ領域は、誰も参照していないときにゴミ収集器によって解放されます.
使用可能なメモリプールを返します.
同じように、スコフにも参照があれば、彼は消えずに生きている.(201p)
// 14-02
var x = 'global';

function foo() {
  console.log(x);
  var x = 'local';
}

foo();          // ?
console.log(x); // global
ホイスティンhoistingはスコフ単位で動作する.
Javascript固有の特性により、変数宣言がscopeのフロントエンドに昇格したように見えます.
グローバルオブジェクトglobal Objectコードが実行される前に
Javascriptエンジンによって任意のオブジェクトより先に生成された特殊なオブジェクト.
Client-side環境(ブラウザ)提供ウィンドウ、
Server-side環境(Node.js)では、グローバルオブジェクトを表します.
  • ブラウザ環境では、グローバルオブジェクトはwindow
  • です.
  • ブラウザ環境において、varキーワードとして宣言されたグローバル変数は、グローバルオブジェクトウィンドウのProperty
  • である.
  • グローバルオブジェクトウィンドウは、Webページが閉じる前に有効な
  • です.
    ブラウザ環境で2479142キーワードとして宣言されたグローバル変数は、Webページを閉じる前に有効です.
    キーワードで宣言されるグローバル変数のライフサイクルは、グローバルオブジェクトのライフサイクルと一致します.

    グローバル変数の問題


    無名の結合
    すべてのコードはグローバル変数を参照し、変更できます.
    ロングライフサイクル
    メモリリソースも長時間かかります
    チェーンの終点に存在
    変数検索時に検索速度が最も遅い.
    ネーミングスペース汚染
    分離されたファイルでグローバルスキャンを共有

    グローバル変数を回避する方法

    // 14-04 즉시 실행 함수
    (function () {
      var x = 10;
    }());
    
    console.log(x); // ReferenceError: x is not defined
    
    // 14-05 네임스페이스 객체
    var MYAPP = {};
    MYAPP.name = 'Kim';
    MYAPP.person = {
      name: 'Lim'
    }
    console.log(MYAPP.name);         // Kim
    console.log(MYAPP.person.name);  // Lim
    
    // 14-07 모듈 패턴
    var Counter = (function() {
      var num = 0;  // private
      return {      // public
        increase() {
          return ++num;
        },
        decrease() {
          return --num;
        },
      };
    }());
    // 14-08 ES6 모듈
    <script type="module" src="lib.mjs"></script>
    <script type="module" src="app.mjs"></script>