JavaScript閉鎖理解

8804 ワード

js閉包
原理に触れる
  • jsチェーン構造
  • ゴミ回収メカニズム
  • 一、変数スコープ
  • グローバル変数
  • ローカル変数
  • 関数内部では、大域変数を直接読み込むことができます.関数の外部では、関数内部のローカル変数を読み込めません.
    二、関数外部からローカル変数を読み出す
    解決方法:関数の内部で関数を定義します.
    function f1() {
        var n = 1;
        function f2() {
            alert(n);
        }
    }
    
    控訴コードには、関数f 2が関数f 1の内部に含まれており、f 1内部の全ての局所変数対f 2が見られます.しかし、逆にだめです.f 2内部の局所変数はf 1に対しては見えません.
    これはJavascript言語特有の「連鎖作用領域」構造であり、サブオブジェクトは一段ずつ上に向かってすべての親オブジェクトの変数を探します.したがって、親オブジェクトのすべての変数は、子オブジェクトに対しては見えますが、逆は成立しません.
    関数f 2は、f 1の局所変数を読み出すことができるので、f 2を戻り値としてf 1の外部から内部変数を読み出すことができる.
    function f1() {
        var n = 1;
        return function f2() {
            alert(n);
        }
    }
    var result = f1();
    result(); //1
    
    三、クローズドの概念
    クローズドとは、他の関数の内部変数を読み取る機能です.
    JavaScriptでは、関数の内部のサブ関数だけが局所変数を読み取ることができるので、クローズドを単に「関数の内部に定義された関数」と理解することができます.
    したがって、本質的には、クローズドとは、関数の内部と外部をつなぐ橋のことです.
    四、クローズドの用途
  • 関数内部の変数
  • を読みだします.
  • は、変数の値を常にメモリに保存させる
  • .
    f 1はf 2の親関数であり、f 2はすべての変数に割り当てられており、f 2は常にメモリにあり、f 2の存在はf 1に依存しているため、f 1も常にメモリにあり、呼び出しが終了した後、ゴミ回収メカニズムによって回収されることはない.
    五、注意
  • クローズドは関数の変数をメモリに保存しますので、メモリの消耗が大きいので、クローズドを乱用してはいけません.そうでないと、ウェブページの性能問題が発生します.IEでメモリの漏洩を引き起こすかもしれません.解決方法は、関数を終了すると使用しないローカル変数をすべて削除します.
  • クローズドは親関数の外部にあり、親関数の内部変数の値を変更します.したがって、親関数を対象として使用する場合は、クローズドをそのパブリックメソッドとして、内部変数をそのプライベート属性として扱います.このときは、親関数の内部変数の値を勝手に変えないように注意してください.
  • クローズドは、関数内の任意の変数を含む最後の値しか取得できません.
  • function createFunctions(){
        var result = new Array();
        for (var i=0; i < 10; i++){
            result[i] = function(){
    			return i; 
    			};
    	}
        return result;
    }
    
                10
    
    実例
       var name = "The Window";
      var object = {
        name : "My Object",
        getNameFunc : function(){
          return function(){
            return this.name;
          };
        }
      };
      console.log(object.getNameFunc()());//"The Window"
    
      var name = "The Window";
      var object = {
        name : "My Object",
        getNameFunc : function(){
          var that = this;
          return function(){
            return that.name;
          };
        }
      };
      console.log(object.getNameFunc()());//My Object