Вероятно, что к этому моменту вы уже знаете все о функциях и обо всех их забавных особенностях. Важная часть работы с функциями, JavaScript и (возможно) жизнью в целом — это понимание замыканий. На рис. 9.1 замыкание обозначено серой областью, в которой пересекаются области функций и переменных.
Рис. 9.1. Замыкания
Больше ничего не буду говорить о замыканиях — лучше всего за них скажет сам код. Как бы я ни пытался сейчас их описать, это только еще больше вас запутает. В последующих разделах мы начнем со знакомого нам материала и будем постепенно продвигаться вглубь вражеской территории, населенной замыканиями.
Поехали!
Функции внутри функций
Первое, что мы сделаем, — проясним, что происходит, когда вы используете функции внутри функций, причем внутренняя функция возвращается. Для начала рассмотрим короткий пример.
Взгляните на этот код:
function calculateRectangleArea(length, width) {
return length * width;
}
let roomArea = calculateRectangleArea(10, 10);
alert(roomArea);
Функция calculateRectangleArea получает два аргумента и возвращает результат их умножения туда, откуда пришел вызов. В данном примере роль стороны, направившей вызов, играет переменная roomArea.
После выполнения этого кода переменная roomArea содержит результат умножения 10 на 10, равный 100 (рис. 9.2).
Рис. 9.2. Результат roomArea
Как вы знаете, функция может вернуть практически что угодно. В данном случае мы вернули число. Вы так же легко можете вернуть текст (то есть строку), значение undefined, пользовательский объект и т. д. До тех пор пока код, вызывающий функцию, знает, как поступить с возвращаемым ей результатом, вы можете делать практически все, что пожелаете. Вы даже можете вернуть другую функцию. На этом моменте остановимся поподробнее.
Ниже представлен простейший пример того, что я имею в виду:
function youSayGoodBye() {
alert("Good Bye!");
function andISayHello() {
alert("Hello!");
}
return andISayHello;
}
У нас могут быть функции, содержащие в себе другие функции. В данном примере есть функция youSayGoodbye, которая содержит alert и функцию andISayHello (рис. 9.3).
Рис. 9.3. Функция внутри функции
В этом примере интересно то, что возвращает функция youSayGoodbye, когда ее вызывают. А возвращает она функцию andISayHello:
function youSayGoodBye() {
alert("Good Bye!");
function andISayHello() {
alert("Hello!");
}
return andISayHello;
}
Попрактикуемся на таком примере. Для вызова функции инициализируем переменную, указывающую на youSayGoodBye:
let something = youSayGoodBye();
В момент выполнения этой строки кода будет также выполнен весь код внутри функции youSayGoodBye. Это значит, что вы увидите диалоговое окно (благодаря alert), говорящее нам Good Bye! (рис. 9.4).
Рис. 9.4. Диалоговое окно Good Bye!
Как часть процесса выполнения до завершения функция andISayHello будет также создана и затем возвращена. В этот момент наша переменная — something, способная обратиться только к одному элементу, а именно к функции andISayHello (рис. 9.5).
Рис. 9.5. Переменная something и функция andISayHello
С точки зрения переменной something внешняя функция youSayGoodBye просто исчезает. Так как теперь переменная something указывает на функцию, вы можете активировать эту функцию, вызвав ее, как обычно, с помощью открывающих и закрывающих скобок:
let something = youSayGoodBye();
something();
Когда вы это сделаете, произойдет выполнение внутренней возвращенной функции (то есть andISayHello). Как и раньше, ждите появления диалогового окна, но теперь оно скажет Hello! (рис. 9.6), что определено в alert внутри этой функции.
Рис. 9.6. Hello!
Все это скорее похоже на обзор. Единственное новое, о чем вы могли узнать, — это то, что как только функция возвращает значение, она уходит из поля действия. Остается только возвращенное значение.
Хорошо. А теперь, как я и обещал, мы подобрались к границе вражеской территории. В следующем разделе дополним только что пройденный материал, рассмотрев схожий пример, но с некоторой особенностью.
Когда внутренние функции независимы
В предыдущем примере внутренняя функция andISayHello была самостоятельной и не опиралась ни на какие переменные или состояние внешней функции:
function youSayGoodBye() {
alert("Good Bye!");
function andISayHello() {
alert("Hello!");
}
return andISayHello;
}
На практике мы будем сталкиваться с подобной ситуацией очень редко. Зачастую у нас будут переменные и данные, используемые совместно как внешней, так и внутренней функцией. Для наглядности посмотрим на такой пример:
function stopWatch() {
let startTime = Date.now();
function getDelay() {
let elapsedTime = Date.now() — startTime;
alert(elapsedTime);
}
return getDelay;
}
Здесь показан очень простой способ измерения времени, необходимого для какого-либо действия. Внутри функции stopWatch мы видим переменную, для которой установлено значение Date.now():
function stopWatch() {
let startTime = Date.now();
function getDelay() {
let elapsedTime = Date.now() — startTime;
alert(elapsedTime);
}
return getDelay;
}
У нас также есть внутренняя функция getDelay:
function stopWatch() {
let startTime = Date.now();
function getDelay() {
let elapsedTime = Date.now() — startTime;
alert(elapsedTime);
}
return getDelay;
}
Функция getDelay отображает диалоговое окно, содержащее разницу во времени между новым вызовом Date.now() и ранее объявленной переменной startTime.
Что касается функции stopWatch, то последнее, что она делает перед завершением, — это возврат функции getDelay. Как мы можем увидеть, этот код очень похож на код из предыдущего примера. У нас есть внешняя и внутренняя функции, а также внешняя функция, возвращающая внутреннюю.
Теперь, чтобы увидеть stopWatch в действии, добавьте следующие строки кода:
let timer = stopWatch();
// Сделать что-нибудь за некоторое время.
for (let i = 0; i < 1000000; i++) {
let foo = Math.random() * 10000;
}
// Вызвать возвращаемую функцию.
timer();
Полностью разметка и код выглядят так:
Если вы запустите этот код, то увидите диалоговое окно, отображающее, сколько миллисекунд прошло между инициализацией переменной timer, выполнением цикла for до завершения и вызовом переменной timer в качестве функции (рис. 9.7).
Рис. 9.7. Переменная timer, вызванная в качестве функции
Если объяснить по-другому, то мы вызываем функцию stopWatch, затем выполняем длительную операцию и вызываем эту функцию повторно, чтобы узнать продолжительность этой длительной операции.
Теперь, когда мы видим, что наш пример работает, вернемся к функции stopWatch и посмотрим, что именно происходит. Как я уже отмечал чуть выше, многое из того, что мы видим, схоже с примером youSayGoodBye / andISayHello. Но есть одна особенность, которая привносит отличие в текущий пример, и важно обратить внимание на то, что происходит, когда функция getDelay возвращается в переменную timer.
На рис. 9.8 мы видим незавершенную визуализацию этого процесса:
Рис. 9.8. Внешняя функция stopWatch больше не действует, и переменная timer становится привязанной к функции getDelay
Внешняя функция stopWatch вышла из игры, и переменная timer стала привязанной к функции getDelay. А теперь укажем на эту особенность. Функция getDelay опирается на переменную startTime, существующую в контексте внешней функции stopWatch:
function stopWatch() {
let startTime = Date.now();
function getDelay() {
let elapsedTime = Date.now() — startTime;
alert(elapsedTime);
}
return getDelay;
}
Когда внешняя функция stopWatch перестает действовать и getDelay возвращается в переменную timer, что происходит на следующей строке?
function getDelay() {
let elapsedTime = Date.now() — startTime;
alert(elapsedTime);
}
В текущем контексте показалось бы логичным, если бы переменная startTime не была определена, верно? Но пример сработал, а значит, дело в чем-то еще, а именно в скромном и загадочном замыкании. Теперь остается пояснить, что должно произойти, чтобы переменная startTime сохранила значение, а не оставалась неопределенной.
Рабочая среда JavaScript, отслеживающая все переменные, использование памяти, ссылок и т. д., действительно умна. В нашем примере ею обнаружено, что внутренняя функция (getDelay) опирается на переменные из внешней функции (stopWatch). Когда это происходит, рабочая среда обеспечивает, чтобы любые нужные переменные из внешней функции были доступны внутренней функции, даже если внешняя функция перестает действовать.
Для наглядности посмотрим, как выглядит переменная timer, на рис. 9.9.
Она по-прежнему ссылается на функцию getDelay, но getDelay при этом также имеет доступ к переменной startTime, которая существовала во внешней функции stopWatch. Так как внутренняя функция замкнула связанные с ней переменные внешней функции в своей области, мы называем ее замыканием (рис. 9.10).
Рис. 9.9. Переменная timer
Рис. 9.10. Схематичное изображение замыкания
Формально замыкание можно определить как вновь созданную функцию, которая также содержит свой переменный контекст (рис. 9.11).
В нашем примере это описано так: переменная startTime получает значение Date.now в момент инициализации переменной timer и начинает выполнение функции stopWatch. Затем функция stopWatch возвращает внутреннюю функцию getDelay и прекращает действие, оставляя при этом те из своих переменных, на которые опирается внутренняя функция. Внутренняя же функция, в свою очередь, замыкает эти переменные.
Рис. 9.11. Более формальное определение замыкания
КОРОТКО О ГЛАВНОМ
Разбор замыканий на примерах позволил обойтись без множества скучных определений, теорий и жестикуляций. На самом деле замыкания — обычная для JavaScript тема. Вы будете иметь с ними дело в любых мудреных и менее сложных ситуациях.
Если из всего этого нужно было бы запомнить что-то одно, то вот оно: самое важное, что делают замыкания, — это позволяют функциям работать, даже когда их среда существенно изменяется или исчезает. Любые переменные, находившиеся в области при создании функции, замыкаются и защищаются, чтобы обеспечить продолжение работы функции. Подобное поведение очень важно для таких динамических языков, как JavaScript, где вам часто приходится создавать, изменять и уничтожать что-либо на ходу. Удачи!
В этой главе мы затронули много тем. Если у вас есть какие-либо вопросы касательно пройденного, пожалуйста, пишите мне на форуме https://forum.kirupa.com, и вы получите ответ в кратчайшие сроки.