Замыкания в JavaScript
О замыканиях узнают, как правило, сталкиваясь с тем, что нужно “навесить” похожие обработчики на несколько элементов. Простой пример:
function setdisplay (elementID,vis) {
document.getElementById(elementID).style.display=vis; //'block' or 'none'
}
for (i=1;i<=4;i++) {
element = document.getElementById('element'+i); //#element1,#element2...
element.onmouseover = function (e) {
setdisplay('showhide'+i,'block');
}
element.onmouseout = function (e) {
setdisplay('showhide'+i,'none');
}
}
По идее при наведении курсора на элемент #element1 должен показываться showhide1, и скрываться после события onmouseout. =) Однако, i в данном случае будет иметь значение равное 5 =) для всех функций.
Вот тут-то и возникает вопрос, как “зафиксировать” текущее значение переменной.
element.onmouseover =
function(x) {
return function(e) { setdisplay ('showhide'+x,'block'); }
}(i)
Мы создаем дополнительную “внутреннюю” функцию, которая вызывается с параметром i.. А в самой функции используется локальная переменная x. Всё очень сложно может показаться только на первый взгляд.. ).
Открыв для себя такую возможность, я стал искать - наверняка я не первый, кто с этим столкнулся. Как выяснилось, такой прием (или сама функция) называется Замыканием в JavaScript.
Использование замыканий может случайно (или бездумно) привести к непредсказуемым последствиям, однако если немного разобраться - замыкания могут оказаться полезными.
Довольно объемная статья про замыкания в JavaScript:
http://www.fpublisher.ru/articles/web_technologies/type6/article70.htm
http://abramov.tv/2009/10/chto-takoe-zamyikaniya-v-php-i-javascript/
Метки: javascript
