ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript クロージャの概要

JavaScript クロージャの概要

一个新手
一个新手オリジナル
2017-09-06 13:44:141774ブラウズ

今回は読後レビューです

javasrciptのプロトタイプとクロージャの深い理解 - クロージャ

Javasrciptの秘密の花園 - クロージャと関数の参照

クロージャに関する2つの記事を読み通した後でも、私はまだ得るものがありました。 、忘れるのを恐れて簡単にまとめておきます

さて、パフォーマンスを始めましょう

クロージャとは何ですか?

クロージャは JavaScript の非常に重要な機能です。これは、現在のスコープが常に外側のスコープ内の変数にアクセスできることを意味します。

(通常の状況では、現在のスコープはそれ自体または上位のスコープのみにアクセスできます)、スコープのこの部分は次回書きます

関数は独自のスコープを持つJavaScriptの唯一の構造体であるため、クロージャの作成機能に依存します。

が閉じられるとき、関数には 2 つの状況があり、1 つは関数が

戻り値

として渡される場合、もう 1 つは関数が パラメーター

1 として渡される場合です。戻り値として関数

function nihao(){var i=0;return  function get(i){
    i++;    return i;
}
}var f=nihao();
f(1);

コンソールで実行すると、結果は以下の通り

実行結果は2です

戻り値としてget関数を変数fに代入します。 f(1)を実行すると、getのスコープに直接入ってiに1を代入し、i++を実行するとiが2になり、i

2を返します。関数はパラメータとして渡されます

var a=2,b=function(c){      
    if(c>a){
      console.log(c);  
}     
};
(function(f1){    
    var a=5;
    f1(3)
})(b);

コンソールに出力します

結果は3、

匿名ラッパー(自己実行匿名関数)を実行したことがわかります。 then put function b パラメータとして無名関数に渡されます。

f1(3)を実行すると、実際にはb=function(3)が実行されます

ここで問題が発生します。匿名ラッパーで実行すると、aは5に再定義されていましたが、f1を実行すると、aに変わりました。また2なので、3>2が成立します。 console.logを実行してみました

実行結果によると、f1関数を呼び出すと実際にはb=function()のスコープに入り、bがaになっていることがわかります。関数代入式で定義された関数

つまり、関数 b と関数 a は実際には同じスコープ内にあり、このとき var a=2 も実行されます。そのため、When if(c>a) を実行すると、 )、a は 2 として再定義されました

もう終わったと思いますか?

間違って、関数宣言を使用して結果を再度テストしました

はい、b が関数宣言で定義されている場合でも、結果は 3 です

つまり、これは関数の定義方法とは何の関係もありません。関数宣言で定義しても、関数代入式で定義しても、結果は同じです

では、このように理解するしかありません

f1(3)を実行すると、匿名の役割からスコープが変わりますラッパー関数 b() または var b=function() が存在するスコープにドメインを転送します

その後 if 判定が実行され、a を探しますが、関数 b には見つかりませんでした。ここで定義されている親で A var a=2; この時点で a が見つかり、その後 if ステートメント

3>2 が実行され、console.log が実行され、出力 3

が要約されます、2つはまとめられていないようです、終わりです、

忘れて、最初に次のことを書いてください

わかりました、秘密の花園にどのように書かれているか見てみましょう

function Counter(start) {    
        var count = start;    
        return {
        increment: function() {
            count++;
        },

        get: function() {            
        return count;
        }
    }
}var foo = Counter(4);
foo.increment();
foo.get();

実行結果を見てください

このいまいましいものの実行順序を分析してみましょう

まず、関数代入式を介して変数 foo に Counter メソッドを代入すると、foo も関数になります

スコープの参照や代入ができないためですJavaScript では、変数に外部からアクセスする方法はありません。 唯一の方法はクロージャを使用することです。

代入時にパラメータ 4 も渡され、 foo.increment() を実行すると、この時点ではすでにクロージャなので、 count は 4 となり、 count++ が実行されます count その後、 foo が実行されます。 get(); 2 番目のクロージャに入ると count が返されます。この時点では count は 5 になります。

以上がJavaScript クロージャの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。