Как работают замыкания в JavaScript
1,00
р.
Как сказал Альберт Эйнштейн:
Если вы не можете объяснить что-то шестилетнему, то вряд ли вы сами вполне понимаете.
Я тут попытался объяснить замыкания знакомому 27-ми лет, и он ничего не понял.
Как бы объяснить замыкания тому, кто знаком со всеми принципами программирования, необходимыми для понимания замыканий (функциями, переменными, областью видимости и т.д.), кроме, собственно, замыканий?
Этот вопрос переведён с англоязычного SO.
Ответ
Это перевод из community wiki.
В JavaScript функции могут быть описаны не только одна за другой, но и одна внутри другой. Когда у вас одна функция находится внутри другой, то внутренняя функция имеет доступ к переменным внешней функции.
function внешняя(x) { var tmp = 3 function внутренняя(y) { alert(x + y + (++tmp)) // выведет 16 } внутренняя(10) } внешняя(2)
Этот код всегда выдаёт 16, потому что функция внутренняя видит x, который является переменной в функции внешняя. В данном случае аргументом функции. Так же внутренняя() может видеть tmp из внешней().
Это и называется замыкание или closure. Если точнее, замыканием называется именно внешняя функция, а всё что внутри неё называется closure environment или среда замыкания.
Иногда говорят, что замыкание это функция которая возвращает функцию, это неправильно. Для того, чтобы назвать функцию замыканием, достаточно того, чтобы внутренняя функция обращалась к переменной извне своей области видимости.
function foo(x) { var tmp = 3 return function (y) { alert(x + y + (++tmp)) // will also alert 16 } } var bar = foo(2) // bar is now a closure. bar(10)
Приведённая выше функция также выдаст 16, поскольку bar даже после завершения foo продолжает иметь доступ к x и tmp, пусть даже сама переменная bar и не находится внутри области видимости в которой они были объявлены.
При этом, поскольку переменная tmp всё ещё находится внутри замыкания bar, она продолжает увеличиваться при каждом вызове bar.
Вот простейший пример замыкания:
var a = 10 function test() { console.log(a) // вывод 10 console.log(b) // вывод 6 } var b = 6 test()
При запуске функции в JavaScript, для неё создаётся окружение, то есть список всех видимых ей переменных, не только аргументов и переменных объявленных внутри неё, но и снаружи, в данном примере это 'a' и 'b'.
Можно создать более чем одно замыкание в одном окружении, вернув их массивом, объектом или привязав к глобальным переменным. В таком случае, все они будут работать с тем же самым значением x или tmp, не создавая отдельных копий.
Поскольку в нашем примере x это число, то его значение копируется в foo как его аргумент x.
С другой стороны, в JavaScript всегда используются ссылки, когда передаются объекты. Если бы вы вызвали foo с объектом в качестве аргумента, то возвращённое замыкание вернуло бы ссылку на оригинальный объект!
function foo(x) { var tmp = 3 return function (y) { alert(x + y + tmp) x.memb = x.memb ? x.memb + 1 : 1 alert(x.memb) } } var age = new Number(2) var bar = foo(age) // bar теперь замыкание ссылающееся на age. bar(10)
Как и следовало ожидать, каждый вызов bar(10) увеличивает x.memb. Чего вы могли не ожидать, так это, что x продолжает ссылаться на тот же самый объект, что и age! После двух вызовов bar, age.memb будет равен 2! Кстати, так и происходят утечки памяти в HTML объектах.
Если вы не можете объяснить что-то шестилетнему, то вряд ли вы сами вполне понимаете.
Я тут попытался объяснить замыкания знакомому 27-ми лет, и он ничего не понял.
Как бы объяснить замыкания тому, кто знаком со всеми принципами программирования, необходимыми для понимания замыканий (функциями, переменными, областью видимости и т.д.), кроме, собственно, замыканий?
Этот вопрос переведён с англоязычного SO.
Ответ
Это перевод из community wiki.
В JavaScript функции могут быть описаны не только одна за другой, но и одна внутри другой. Когда у вас одна функция находится внутри другой, то внутренняя функция имеет доступ к переменным внешней функции.
function внешняя(x) { var tmp = 3 function внутренняя(y) { alert(x + y + (++tmp)) // выведет 16 } внутренняя(10) } внешняя(2)
Этот код всегда выдаёт 16, потому что функция внутренняя видит x, который является переменной в функции внешняя. В данном случае аргументом функции. Так же внутренняя() может видеть tmp из внешней().
Это и называется замыкание или closure. Если точнее, замыканием называется именно внешняя функция, а всё что внутри неё называется closure environment или среда замыкания.
Иногда говорят, что замыкание это функция которая возвращает функцию, это неправильно. Для того, чтобы назвать функцию замыканием, достаточно того, чтобы внутренняя функция обращалась к переменной извне своей области видимости.
function foo(x) { var tmp = 3 return function (y) { alert(x + y + (++tmp)) // will also alert 16 } } var bar = foo(2) // bar is now a closure. bar(10)
Приведённая выше функция также выдаст 16, поскольку bar даже после завершения foo продолжает иметь доступ к x и tmp, пусть даже сама переменная bar и не находится внутри области видимости в которой они были объявлены.
При этом, поскольку переменная tmp всё ещё находится внутри замыкания bar, она продолжает увеличиваться при каждом вызове bar.
Вот простейший пример замыкания:
var a = 10 function test() { console.log(a) // вывод 10 console.log(b) // вывод 6 } var b = 6 test()
При запуске функции в JavaScript, для неё создаётся окружение, то есть список всех видимых ей переменных, не только аргументов и переменных объявленных внутри неё, но и снаружи, в данном примере это 'a' и 'b'.
Можно создать более чем одно замыкание в одном окружении, вернув их массивом, объектом или привязав к глобальным переменным. В таком случае, все они будут работать с тем же самым значением x или tmp, не создавая отдельных копий.
Поскольку в нашем примере x это число, то его значение копируется в foo как его аргумент x.
С другой стороны, в JavaScript всегда используются ссылки, когда передаются объекты. Если бы вы вызвали foo с объектом в качестве аргумента, то возвращённое замыкание вернуло бы ссылку на оригинальный объект!
function foo(x) { var tmp = 3 return function (y) { alert(x + y + tmp) x.memb = x.memb ? x.memb + 1 : 1 alert(x.memb) } } var age = new Number(2) var bar = foo(age) // bar теперь замыкание ссылающееся на age. bar(10)
Как и следовало ожидать, каждый вызов bar(10) увеличивает x.memb. Чего вы могли не ожидать, так это, что x продолжает ссылаться на тот же самый объект, что и age! После двух вызовов bar, age.memb будет равен 2! Кстати, так и происходят утечки памяти в HTML объектах.
