Предположим, вы хотите посчитать, сколько раз пользователь нажимал кнопку на веб-странице.
Для этого вы запускаете функцию для события onclick кнопки, чтобы обновить счетчик переменной
<button onclick="updateClickCount()">click me</button>
Теперь может быть много подходов, таких как:
1) Вы можете использовать глобальную переменную и функцию для увеличения счетчика :
var counter = 0;
function updateClickCount() {
++counter;
// do something with counter
}
Но подводный камень в том, что любой скрипт на странице может изменить счетчик, не вызывая updateClickCount().
2) Теперь вы можете подумать об объявлении переменной внутри функции:
function updateClickCount() {
var counter = 0;
++counter;
// do something with counter
}
Но, эй! Каждый раз, когда вызывается функция updateClickCount(), счетчик снова устанавливается на 1.
3) Думаете о Вложенных функциях ?
Вложенные функции имеют доступ к области видимости над ними.
В этом примере внутренняя функция updateClickCount() имеет доступ к переменной счетчика в родительской функции countWrapper()
function countWrapper() {
var counter = 0;
function updateClickCount() {
++counter;
// do something with counter
}
updateClickCount();
return counter;
}
Это могло бы решить дилемму счетчика, если бы вы могли добраться до функции updateClickCount() извне, и вам также нужно найти способ выполнить counter = 0 только один раз, а не каждый раз.
4) Закрытие на помощь! (функция самовозбуждения) :
var updateClickCount=(function(){
var counter=0;
return function(){
++counter;
// do something with counter
}
})();
Функция самовывоза запускается только один раз. Он устанавливает counter в ноль (0) и возвращает выражение функции.
Таким образом, updateClickCount становится функцией. «Замечательная» часть заключается в том, что он может получить доступ к счетчику в родительской области.
Это называется закрытием JavaScript . Это позволяет функции иметь переменные " private ".
counter защищен областью действия анонимной функции и может быть изменен только с помощью функции добавления!
Более живой пример закрытия:
<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>