2

JavaScript のクロージャーについて読んだ後でも、クロージャーがどこで使用されているのか理解できません。クロージャがない場合、(可能であれば)どのように交互に実行され、クロージャの使用によって何が簡素化されますか。誰かが JavaScript のいくつかのコード例でこれを説明できれば、役に立ちます。これを説明する記事へのリンクも歓迎します。同様の質問で言及されているこの記事を読みました。このようなコードで説明します

    function makeSizer(size) {
      return function() {
        document.body.style.fontSize = size + 'px';
      };
    }

    var size12 = makeSizer(12);
    var size14 = makeSizer(14);
    var size16 = makeSizer(16);

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

しかし、代わりにこのような関数を簡単に作成できるのに、なぜこのようにするのでしょうか

function sizer(size) {
            document.body.style.fontSize = size + 'px';
          };

    document.getElementById('size-12').onclick = function(){sizer(12)};
    document.getElementById('size-14').onclick = function(){sizer(14)};
    document.getElementById('size-16').onclick = function(){sizer(16)};
4

3 に答える 3

0

クロージャーを使用すると、複数のことができます。あなたの質問に関して：クロージャは部分関数を設定するために使用されます。この手法は、関数型プログラミングでカリー化が登場したときに使用されます。カリー化とは、各パラメーターが渡され、その結果が返された後に関数が呼び出されることを意味します。ほとんどが部分的な関数ですが、すべてのパラメーターが渡されると、最終的な値が返されます。新しい関数を明示的に返すことで、まさにそのふりをしたまさにそのテクニックです。

なぜ便利なのですか？これは関数型プログラミングの手法であり、オブジェクト指向プログラミングの部分クラスと比較できます。

この概念が役立つ状況があります。詳細な例については、 software-innovators.nlの私のブログをお読みください。

これはクロージャが必要な例の 1 つです。

于 2012-10-25T13:57:50.943 に答える
0

このSOの回答は、概念を詳細に説明していると思います。これを読んだ後、私の理解では、クロージャーは関数をファーストクラスオブジェクトとして作成するためにあるということです。ファースト クラス オブジェクトとしての関数は、引数のように渡すことができ、特定のことを非常に簡単にすることができるため、非常に役立ちます。

また、クロージャーを使用するもう 1 つの利点は、この投稿で説明されているように、JavaScript でメンバーを非公開にするために使用できることです。

于 2012-11-18T20:26:05.167 に答える
0

あなたの例では、makeSizer()return 関数を作成すると、コードが少なくなります。

function makeSizer(size) {
    return function() {
        document.body.style.fontSize = size + 'px';
    };
}

document.getElementById('size-12').onclick = makeSizer(12);
document.getElementById('size-14').onclick = makeSizer(14);
document.getElementById('size-16').onclick = makeSizer(16);

対。

function sizer(size) {
    document.body.style.fontSize = size + 'px';
};

document.getElementById('size-12').onclick = function(){sizer(12)};
document.getElementById('size-14').onclick = function(){sizer(14)};
document.getElementById('size-16').onclick = function(){sizer(16)};
于 2012-10-25T13:56:09.393 に答える