JavaScript с нуля - [21]
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 и прекращает действие, оставляя при этом те из своих переменных, на которые опирается внутренняя функция. Внутренняя же функция, в свою очередь, замыкает эти переменные.
