Замыкания в 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/

Метки:

Автор будет признателен, если Вы поделитесь ссылкой на статью, которая Вам помогла:
BB-код (для вставки на форум)

html-код (для вставки в ЖЖ, WP, blogger и на страницы сайта)

ссылка (для отправки по почте)

Добавить комментарий