私は試みるJavaScript のクロージャを理解するのが最も困難でした。
内部関数を返すことで、その直下の親で定義されたすべての変数にアクセスできるようになると理解しています。
これは私にとってどこで役に立つのでしょうか？まだよく理解できていないのかもしれません。オンラインで見た例実際のコードは提供されず、漠然とした例だけが提供されます。
クロージャの実際の使用例を教えてもらえますか?
例えばこれでしょうか？
var warnUser = function (msg) {
var calledCount = 0;
return function() {
calledCount++;
alert(msg + '\nYou have been warned ' + calledCount + ' times.');
};
};
var warnForTamper = warnUser('You can not tamper with our HTML.');
warnForTamper();
warnForTamper();
ベストアンサー1
ユーザーがWeb ページ上のボタンをクリックした回数をカウントするとします。
このため、ボタンのイベントで関数をトリガーしてonclick変数のカウントを更新します。
<button onclick="updateClickCount()">click me</button>
次のような多くのアプローチが考えられます。
グローバル変数と、カウンターを増やす関数を使うこともできます。
var counter = 0; function updateClickCount() { ++counter; // Do something with counter }しかし、落とし穴は、 を呼び出さなくても、ページ上の任意のスクリプトがカウンターを変更できること
updateClickCount()です。
ここで、関数内で変数を宣言することを考えているかもしれません。
function updateClickCount() { var counter = 0; ++counter; // Do something with counter }updateClickCount()しかし、ちょっと！関数が呼び出されるたびに、カウンターは再び 1 に設定されます。
ネストされた関数について考えていますか?
ネストされた関数は、その「上」のスコープにアクセスできます。
この例では、内部関数は
updateClickCount()親関数のカウンター変数にアクセスできますcountWrapper()。function countWrapper() { var counter = 0; function updateClickCount() { ++counter; // Do something with counter } updateClickCount(); return counter; }updateClickCount()外部から関数にアクセスでき、counter = 0毎回ではなく 1 回だけ実行する方法を見つける必要がある場合は、これによりカウンターのジレンマは解決される可能性があります。
クロージャが救世主です! (自己呼び出し関数) :
var updateClickCount = (function(){ var counter = 0; return function(){ ++counter; // Do something with counter } })();自己呼び出し関数は 1 回だけ実行されます。 を
counterゼロ (0) に設定し、関数式を返します。この方法は
updateClickCount関数になります。素晴らしいのは、親スコープ内のカウンターにアクセスできることです。これはJavaScript クロージャと呼ばれます。これにより、関数が「プライベート」変数を持つことが可能になります。
は
counter匿名関数のスコープによって保護されており、updateClickCount()関数を使用してのみ変更できます。
クロージャに関するより生き生きとした例
<script>
var updateClickCount = (function(){
var counter = 0;
return function(){
++counter;
document.getElementById("spnCount").innerHTML = counter;
}
})();
</script>
<html>
<button onclick="updateClickCount()">click me</button>
<div> you've clicked
<span id="spnCount"> 0 </span> times!
</div>
</html>