JavaScript с нуля
- Автор: Кирупа Чиннатамби
- Жанр: Образование
- Дата выхода: 2021
- Цикл: Библиотека программиста
Читать книгу "JavaScript с нуля"
Когда внутренние функции независимы
В предыдущем примере внутренняя функция 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();
Полностью разметка и код выглядят так:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Closures</title>
<style>
</style>
</head>
<body>
<script>
function stopWatch() {
var startTime = Date.now();
function getDelay() {
var elapsedTime = Date.now() — startTime;
alert(elapsedTime);
}
return getDelay;
}
let timer = stopWatch();
// Сделать что-нибудь за некоторое время.
for (let i = 0; i < 1000000; i++) {
let foo = Math.random() * 10000;
}
// Вызвать возвращаемую функцию.
timer();
</script>
</body>
</html>
Если вы запустите этот код, то увидите диалоговое окно, отображающее, сколько миллисекунд прошло между инициализацией переменной 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.9. Переменная timer
Рис. 9.10. Схематичное изображение замыкания
Формально замыкание можно определить как вновь созданную функцию, которая также содержит свой переменный контекст (рис. 9.11).
В нашем примере это описано так: переменная startTime получает значение Date.now в момент инициализации переменной timer и начинает выполнение функции stopWatch. Затем функция stopWatch возвращает внутреннюю функцию getDelay и прекращает действие, оставляя при этом те из своих переменных, на которые опирается внутренняя функция. Внутренняя же функция, в свою очередь, замыкает эти переменные.
Рис. 9.11. Более формальное определение замыкания
КОРОТКО О ГЛАВНОМ
Разбор замыканий на примерах позволил обойтись без множества скучных определений, теорий и жестикуляций. На самом деле замыкания — обычная для JavaScript тема. Вы будете иметь с ними дело в любых мудреных и менее сложных ситуациях.
Если из всего этого нужно было бы запомнить что-то одно, то вот оно: самое важное, что делают замыкания, — это позволяют функциям работать, даже когда их среда существенно изменяется или исчезает. Любые переменные, находившиеся в области при создании функции, замыкаются и защищаются, чтобы обеспечить продолжение работы функции. Подобное поведение очень важно для таких динамических языков, как JavaScript, где вам часто приходится создавать, изменять и уничтожать что-либо на ходу. Удачи!
В этой главе мы затронули много тем. Если у вас есть какие-либо вопросы касательно пройденного, пожалуйста, пишите мне на форуме https://forum.kirupa.com, и вы получите ответ в кратчайшие сроки.
