javascriptシリーズを深く理解します.

4115 ワード

javascriptはシリーズの文章のURLを深く理解します.https://www.jianshu.com/p/451eed9094f5
閉パックは本当に面接の80%の質問です.
クローズドの概念
簡単に言えば、他の関数の内部変数の関数を読み取ることができます.
この言葉をどうやって理解しますか?関数内で外部の変数を読み取ることができますが、関数外では関数内部の変数を読み取ることができません.関数内部の変数を読み込むにはどうすればいいですか?関数内でもう一つの関数を定義して、関数内部の変数をこの関数で読み込んで、最後にその関数の実行結果に戻ります.関数内部の変数を得ることができます.
        function Out(){
            var a=678;
            function In(){
                console.log(a);
            }
            return In;
        }
        var result=Out();
        result();//678
じゃ、クローズドは何に使いますか?
1.ブロックレベルの作用領域2を模して、変数を格納します.3.プライベート変数をカプセル化します.
じゃ、私達はいつクローズドを使いますか?
1、プライベートをカプセル化する方法
javaを学んだことがある学生はすべて知っていて、javaは種類の中で私有の変数と方法を書くことができて、外は呼び出すことができなくて、実はjsの中でも実現することができて、どのように実現しますか?
var fn=(function(){
        var counter=0;
        function getValue(val){
            counter+=val;
        }
        return {
            increment:function(){
                getValue(1);
            },
            decrement:function(){
                getValue(-1);
            },
            value:function(){
                return counter;
            }
        }
    })();
    console.log(fn.value());//  0
    fn.increment();
    console.log(fn.value());//  1
javaを学んだことがある学友はこれを見てとても熟知していますか?javaの中の対象に向けてのようではありません.この中のincrement、decrement、valueはクローズドに相当します.私達はプライベート変数counterをカプセル化して、その後クローズドを通じて操作します.
サイクルエラーの問題を解決する
まずコードを見にきます.

        
        
        
    
    
    
        
        for(var i=0;i<$("button").length;i++){
            $("button").eq(i).click(function(){
                console.log(i);//      3
            });
        }
    
上記の3つのボタンを定義しました.対応するボタンをクリックして、文字を印刷する予定でしたが、上記のように書き方して出力した後の毎回の結果は3です.なぜですか?私達が定義したこれらの関数はすぐに関数を実行するのではなく、クリックした時に実行されます.しかし、クリックした時にサイクルはすでに終わりました.iは3です.だから私たちが出力した値は全部3です.どう解決すればいいですか?これはクローズドを使います.

        
        
        
    
    
    
        
        for(var i=0;i<$("button").length;i++){
            (function(val){
                $("button").eq(val).click(function(){
                console.log(val);
                });
            })(i);
            
        }
    
forループを実行すると、自己実行関数が実行されます.
 $("button").eq(val).click(function(){
                console.log(val);
                });
val値は外から伝わってきます.中のクローズドは一回の値を覚えて、メモリの中にあります.毎回の
 $("button").eq(val).click(function(){
                console.log(val);
                });
お互いに独立しているので、出力の値が違います.
letとクローズドの関係
同じ問題です.

        
        
        
    
 
 
        for(var i=0;i<$("button").length;i++){
            $("button").eq(i).click(function(){
                console.log(i);//      3
            });
        }
    
出力結果が常に3である理由は、jsはグローバルスコープと関数レベルのスコープのみであり、クリックするとグローバルスコープi、iは3と呼ばれるので、スコープレベルのスコープを追加するにはS 6のシンタックスletを使用することができます.

        
        
        
    
 
 
        for(let i=0;i<$("button").length;i++){
            $("button").eq(i).click(function(){
                console.log(i);
            });
        }
    
varをletに変更すればいいです.ブロックレベルの機能領域があります.buttonをクリックするたびにその内部のi変数にアクセスして、上の問題を解決できます.
閉鎖的な長所と短所
利点:パッケージ性を強化し、変数に対する保護作用を達成できる.
短所:1.クローズド内部変数の優先度が外部変数より高いため、スコープ内の階層を多く検索すると、検索速度に影響を与えます.メモリの浪費は親レベル関数=nullを浪費しないようにします.
参照https://juejin.im/post/5aa90e5ef265da239f0713a1#heading-5
https://wangdoc.com/javascript/basic/index.html