スコープとクローズド

3232 ワード

javascript グローバル変数包みを閉じるローカル変数スコープ

スコープとクローズド
1.スコープ
何種類かのよく誤解する例


    alert(a);   // undefined       
    var a = 20;  

//               JavaScript     。                ，          。              ，        
//       

   var a; //    
    alert(a);   
    a = 20;  //         

--------------------------------------------------------
var a=10;
    if(a>20){
        var b=20;
    }
    console.log(b);   //undefined      ,      */

--------------------------------------------------------------------------------------------
var a = 10;
    function foo(){
        cnosole.log(a);   //        ,    
        var a = 20;
    }
    foo();   //undefined
--------------------------------------------------------------------------------------------
    var a = 10;
    function foo(){
        console.log(a);    //10
        a = 20;
        console.log(a);    //20
    }
    foo();   

--------------------------------------------------------------------------------------------

    console.log(a);   //  
    console.log(typeof a)  //undifined,      
    function foo(){
        a = 20;
    }
    foo();    //   ,     a         
    console.log(a);    //          undefined
--------------------------------------------------------------------------------------------

2.クローズド
包みを閉じる
広義のクローズド:
関数がその外部の変数にアクセスしました.
狭義のクローズド:
関数が外部変数関数の局所変数にアクセスすると、この関数は閉じられています.
クローズドの特徴:
クローズドパケットは、その外部関数のスコープ内の任意の変数にアクセスでき、アクセスした変数の値は最新の値に違いない.
外部関数の実行が終了しても、外部関数のローカル変数にアクセスできます.

var a =10;
    function foo(){
        var a =20;
        function inner(){
            console.log(a);
        }
        a =30;
        return inner;
    }
    var f = foo();
    f();               //30

パッケージを閉じたオブジェクトを使う

function foo(){
        var p = {                //        ,         
            name : "Tom",
            age : 22
        }
        return {
            getName : function(){
                return p.name;
            },
            getAge : function(){
                return p.age;
            },
            setName : function(name){
                return p.name = name;
            },
            addAttr : function(key,value){
                return p[key] = value;
            }   
        }
    }
    var f = foo();
    f.getName()  //"Tom"

for循環の経典問題




    
    Document


    
    
    
    

    var btns = document.querySelectorAll("button");
//     :        
    for (var i=0; i<btns.length; i++){
        //        
        btns[i].onclick = (function(i){
                    return function(){
                        alert(i);
                    }
        })(i)
//     :       i  
        btns[i].index = i;
        btns[i].onclick = function(){
            alert(this.index);
        }
    }
//     :  ES6    ,let
    for (let i=0; i<btns.length; i++){
        btns[i].onclick = function(){
            alert(i);
        }
    }

androidモバイルview