JavaScript匿名関数とクローズド紹介

11912 ワード

匿名関数:名前のない関数;クローズド:関数のスコープ内の変数の関数にアクセスできます.
匿名関数


//     
  function box(){            //     box;
    return 'Lee';           
  }
  box();                // =>Lee;     ;
//     
  function(){              //     ,   ;
    return 'Lee';
  }
//          
  (function(name){
    console.log(name);        // =>Lee;
  })("Lee");              // "()"      ,      ;
//           
  var box = function(){        //          ;
    return 'Lee';
  };
  console.log(box());         //            ;
//         
  function box(){
    return function(name){      //         ,    ;
      return name;
    };
  };
  console.log(box()("Lee"));      //   box()      ,   ;

二重閉鎖
クローズド:別の関数のスコープ内の変数の関数にアクセスする権限があります.閉じたパケットを作成する一般的な方法:関数の内部に別の関数を作成します.この関数の局所変数には他の関数を介してアクセスします.


//             
  function box(){
    var user = 'Lee';
    return function(){        //         box()     user;
      return user;
    };
  }
  console.log(box()());        // =>Lee;     box()()           ;

  var b = box();
  console.log(b());          // =>Lee;            ;

//   :             ,          ; 
// (                 ,              ;         ,       );


//   :
//          
  var age = 100;            //     ;
  function box(){
    age++;              //            ,    ;
  };
  box();                //     ,    ;
  console.log(age);           // =>101;       ;
  box();                //     ,    ;
  console.log(age);           // =>102;       ;
//             
  function box(){
    var age = 100;
    age++;              //     ;
    return age;
  }
  console.log(box());          // =>101;
  console.log(box());          // =>101;       ,          ,      age      ;

//                
  function box(){
    var age = 100;
    return function(){        //          ;
      age++;
      return age;          //          ; 
    };                //   box()       age             ;
  }
  var b = box();            //  box()       ;
  console.log(b());           // =>101;       ,    ;
  console.log(b());           // =>102;          ,    ;

// PS:                          ,            ;               ;(      "     "         )
//              ,                        ; ?


//          
  function box(){
    var arr = [];
    for(var i=0; i<5; i++){     //      i=5 ,    ;         i==5; 
      arr[i] = function(){    // arr[i]              function(){};
        return i;        
      };
    };
    return arr;           // arr = [function,function,function,function,function];
  }
  var b = box();           // =>[function,function,function,function,function];     box()     arr;
  console.log(b.length);       // =>5;           ;
  for(var i=0; i5,5,5,5,5;         ,       ;
  }
  //             5,           i ;
  //   b[i]        ,           ,       ,box()     ,i    5;

//          - 1,        
  function box(){
    var arr = [];
    for(var i=0; i<5; i++){
      arr[i] = (function(num){  // arr[i]                0-4;
        return num; 
      })(i);           //        ;
    }
    return arr; 
  }
  var b = box();           // =>[0,1,2,3,4];   b  box()     ;
  for (var i = 0; i < b.length; i++) {
    console.log(b[i]);       // 0 1 2 3 4;         ;
  };
  //    ,             ,       a[i]          ;    b[0]-b[4]    0,1,2,3,4  ;

//          - 2,            ;
  function box(){
    var arr = []; 
    for(var i=0; i<5; i++){
      arr[i] = (function(num){
        return function(){   //     ;
          return num;      
        }
      })(i);
    }
    return arr;           // arr = [function,function,function,function,function];
  }
  var b = box();
  for (var i = 0; i < b.length; i++) {
    console.log(b[i]());      // 0,1,2,3,4; 
  };

//  1  2 ,            ,        arr[i];
//    i,           ,               i;   box()      i;

三thisオブジェクト


//       this           ;this                   ;
//   this         window,              ;
//           window ,                  ; 
  var user = 'Window';
  var obj = {
    user:'Object',
    getUserFunction:function(){
      return function(){            //      obj,   this  window;
        return this.user;
      };
    }
  };
  console.log(obj.getUserFunction()());      // =>Window;

  //           
  console.log(obj.getUserFunction().call(obj));  // =>Object;

  //                 
  getUserFunction:function(){
    var that = this;               //          this;  that  obj  ;
    return function(){
      return that.user;
    }
  }
  console.log(obj.getUserFunction()());      // =>Object;

四メモリ漏れ


//   IE JScript   DOM             ,     IE          ,                ;
  function box(){
    var oDiv = document.getElementById('oDiv'); // oDiv            ;
    oDiv.onclick = function(){
      alert(oDiv.innerHTML);          //    oDiv      ;
    };
    oDiv = null;                 //     ;
  }
  box();
  //             box()        ,          oDiv    ;
  //         ,oDiv        1;                 ;
  // PS:          ,               ;

5ブロックレベルのスコープを模倣する(匿名関数を定義し、直ちに呼び出す)


// JS          ;
//         (for  /if  )      ,                  ;
  function box(count){
    for(var i=0; i count=2; i=2     ,  i=2;
    console.log(i);               // =>2; i       for    ;
  }
  box(2);

  function box(count){
    for(var i=0; i[1,2,3,4]; box        ;
  })();                      //           ;
  console.log(box);                // =>box is not defined;
  //                            ;             
  //         ,             ;

六プライベート変数


// JavaScript         ;          ;
//             :           ,          ,               ;
//            /                 ;
  function box(){
    var age = 100;                 //     ,      ;
  }

//            ,                      ;
//       ,                 ;    ;
  function Box(){                  //     ;
    var age = 100;                 //     ;
    function run(){                //     ;
      return '   ...';
    };
    this.get = function(){             //          ;
      return age+run();             //         ;
    };
  }
  var box = new Box();
  console.log(box.get());

//                  
  function Person(name){
    var user = name;              //         ;
    this.getUser = function(){
      return user;
    };
    this.setUser = function(name){
      user = name;
    }
  }
  var p = new Person('Lee');
  console.log(p.getUser());            // =>Lee;
  console.log(p.setUser('Jack'));
  console.log(p.getUser());            // =>Jack;
  //   ,                           ;                         ;

静的プライベート変数


//        (     )          ,               ;
  (function(){                  //        ;
    var age = 100;               //       ;
    function run(){
      return '   ...';
    };
    Box = function(){};             //              ;
    Box.prototype.go = function(){       //   (  )  ;       ;
      return age+run();
    };
  })();
  var box = new Box();
  console.log(box.go());             // 100   ...;
//        ,    Box = function(){}   functiong Box(){};     Box     var   
//   :          ,           ;  ,Box         ,              ;
//                ,          ,         ,              ;
  (function(){
    var user = "";
    Person = function(value){          //      Person     ;
      user = value;              //                name;
    };
    Person.prototype.getUser = function(){
      return user;
    };
    Person.prototype.setUser = function(value){
      user = value;
    }
  })();
  var person = new Person();
  person.setUser('Lee');
  console.log(person.getUser());          // =>Lee;
//    prototype       , user         ;
//       :            ;?

8モジュールモード


//    ,                       ,                     ,           ;
//                           ;
//                    ;
  var box = {                   //      ,      :         ;
    age:100,                   //       ,      ;
    run:function(){
      return '   ...';
    };
  };

//             :
  var box = function(){
    var age = 100;
    function run(){
      return '   ...';
    }
    return {                   //                 ;
      go:function(){              //                       ;
        return age+run();          //                  ,                   ;
      }                  
    };                      //      ,                  ;
  }();
//                  ,                   ; 

//            ,      :
  var box = function(){
    var age = 100;
    function run(){
      return '   ...';
    }
    var obj = {                  //        ;
      go:function(){
        return age+run();
      }
    };
    return obj;                  //         ;
  }();

//         ,                   ;
//       ,               ;

//        :         ,       ;
  function Desk(){};
  var box = function(){
    var age = 100;
    function run(){
      return '   ...';
    };
    var desk = new Desk();
    desk.go = function(){
      return age+run();
    };
    return desk;
  }();
  console.log(box.go());              // =>100   ;

九合目
JavaScriptプログラミングにおいて、関数式は非常に有用な技術である.関数式を使うと、関数に名前を付ける必要がなく、動的プログラミングが可能です.
1.関数式
関数宣言とは異なる関数式.関数宣言には名前が必要ですが、関数式は必要ありません.名前のない関数表現を匿名関数と呼びます.2.クローズドは、関数の内部に他の関数を定義すると、クローズドパケットを作成します.クローズドは、関数の内部を含むすべての変数にアクセスする権利があります.原理は以下の通りである.バックグラウンド実行環境において、クローズドの役割ドメインチェーンは、自身の役割領域、関数を含む作用領域、およびグローバル作用領域を含む.通常、関数のスコープおよびそのすべての変数は関数実行終了後に破壊されます.しかし、関数がクローズドバックに戻った時、この関数のスコープはメモリに存在しなくなるまで保存されます.3.ブロックレベルの作用領域は、クローズドパケットを使用して、JavaScriptでブロックレベルの作用領域を模倣することができる(JavaScript自体はブロックレベルの作用領域の概念がない).要点下記のように、関数を作成し、直ちに呼び出します.コードを実行することもできますし、メモリにその関数への参照を残しません.結果として、関数内部のすべての変数は直ちに破壊されます.作用領域(すなわち外部作用領域)を含む変数に特定の変数の割り当て値を与えない限り、4.プライベート変数のクローズドは、オブジェクト内でプライベート変数を作成するためにも使用できます.ポイントは、JavaScriptに真のプライベートオブジェクト属性の概念がないとしても、クローズドを使用して公開方法を実現することができ、公有法により、作用領域に定義された変数にアクセスすることができます.コンストラクターモード、プロトタイプパターンを使用して、ユーザー定義型の特権的な方法を実現することができます.モジュールモードを使用して、単例の特権的な方法を実現することもできます.

JavaScript toString方法原理