Пара слов о программировании

оригинал

Я люблю замыкания. Это замечательный инструмент, любой Javascript программист должен уметь его использовать. Он позволяет делать фантастические вещи. Но есть в нем и свои сложности. Я опишу пару проблем, на которые наткнулся, чтобы у вас было меньше проблем при написании программ.При выполнении простого цикла

В цикле for нет ничего сложного. И нет ничего сложного в for и в Javascript. И так, зачем нужны замыкания в простейше цикле for? Например, для того чтобы привязать обработку событий внутри цикла.

function Highlighter(ul) {
var that = this;
var subjects = ul.getElementsByTagName('li');
for(var i = 0; i < subjects.length; i++) {
addEvent(subjects[i], 'click', function() {
that.highlight(i);
});
}
}

На первый взгляд - обычный цикл for. Мы перебираем все элементы и назначаем обработчик на событие click, при срабатывании которого элемент подсвечивается. Если мы создаем новый Highlight, и затем щелкнем по элементу, мы получаем ошибку. Отслеживая ошибку мы видем (ого!), что i равно длине списка. Проблема!

Когда мы создаем все эти новые функции в цикле, и назначаем их, мы используем переменную i. Но i не относится к этим функциям, она находиться вне области видимости замыкания, т.е. i может измениться. И изменяется! По окончанию цикла она становиться равная длине списка, что не хорошо. И i не удалиться после окончания цикла, она будет существовать пока есть функции использующие ее. (прочитать больше о замыканиях)

Но есть решение, мы можем использовать замыкания, чтобы создавать каждый раз новую функцию, передавая ей параметр, который не будет меняться при дальнейшем исполнении цикла.

function Highlighter(ul) {
var that = this;
var subjects = this.subjects = ul.getElementsByTagName('li');
for(var i = 0; i < subjects.length; i++) {
(function(index) {
addEvent(subjects[index], 'click', function() {
that.highlight(index);
});
})(i);
}
}

Теперь на каждой итерации цикла, мы создаем функцию, которая принимает в качестве параметра индекс элемента. Так как она тут же выполняется, ей будет переданно текущее значение i.

Следующий шаг.

В функции внутри цикла, так же, используется другая внешняя переменная: subjects. Теоретически, позже я могу написать код, котрый будет менять subjects. Или с ним случиться еще что-нибудь. Быть может, я расширю кончтруктор и изменю этот массив. Или, что более вероятно, измениться NodeList, при изменении DOM, например, добавяться или убавиться элементы списка. Если это случиться, появится несоответсвие переменных.

Тем не менее, мы можем сделать наши замыкания более независимыми от этой и других переменных, которые передаются в качестве аргументов.

function Highlighter(ul) {
var that = this;
var subjects = this.subjects = ul.getElementsByTagName('li');
for(var i = 0; i < subjects.length; i++) {
(function(list_item, index) {
addEvent(list_item, 'click', function() {
that.highlight(index);
});
})(subjects[i], i);
}
}

Мы передаем в функцию элемент массива. Если в последствии массив измениться, поведение нашей функции останется прежним (в отличие от that.highlight(index), где будет ошибка обращения к массиву)

Фреймворки позволяют избавиться от этой проблемы.

В большинстве фреймворков эта проблема решена. Для этого используется функция forEach, которая обворачивает передаваемую ей функцию и передает ей параметры в ее области видимости.

В MooTool.

function Highlighter(ul) {
var that = this;
var subjects = this.subjects = ul.getElements('li')
subjects.each(function(el, index) {
addEvent(el, 'click', function() {
that.highlight(index);
});
});
}

С помощью YUI3

YUI().use('node', function(Y) {
function Highlighter(ul) {
var that = this;
var subjects = this.subjects = ul.getElementsByTagName('li');
Y.each(subjects, function(el, index) {
addEvent(el, 'click', function() {
that.highlight(index);
});
});
}
});

Большенство фреймворков имеют свой вариант реализации метода forEach. Однако, если вы не используете фреймворки, вам стоит знать о том как использовать замыкания в циклах.