Кевин Кононенко
Если вы отправили по почте пакет или письмо в прошлом, вы можете понять закрытие в JavaScript.
В вашем путешествии, чтобы стать промежуточным или продвинутым JavaScript Dev, вы можете столкнуться с закрытыми. После прочтения технического ресурса по теме … вы также, вероятно, бегаете в противоположном направлении.
Вот потрясающая вещь о закрытиях : Они позволяют вам писать функции с промежуточным шагом, который может захватывать данные с вашего сайта в определенный момент времени. Это как добавление кнопки «Пауза» к вашей функции. Вы можете запустить свою функцию и сохранить значение переменной в этом конкретном моменте во времени. Затем, когда вы хотите возобновить функцию в более позднюю точку и использовать значения переменных, которые изменились в вашем приложении … Вы можете сделать это с закрытие, или функция В пределах оригинальной функции Отказ
Это становится легче, я обещаю.
Итак, когда черт возьми, вы бы использовали закрытие?
Допустим, вы строите интерактивную карту туристических достопримечательностей в Нью-Йорке, используя API Google Maps. У вас есть массив с кучей карте маркеров, которые вы хотите добавить к карте – статуя свободы, государственного здания империи, остров Кони, вы называете его. Вы хотите добавить все эти маркеры на карту, но вы также хотите добавить событие щелчка на каждый маркер. Когда вы нажимаете на маркер, вы хотите показать динамическую информацию об этом маркере, включая данные живой погоды.
var touristPlaces= […];
for(var i=0; i< touristPlaces.length; i++){ var marker= touristPlaces[i]; $(marker).click(function(){ showToolTip(i) });}Вот проблема – если вы пишете это так, Это не будет работать Отказ Цикл «Для» завершится до того, как обратный вызов в событии клика может зарегистрировать соответствующее значение I. Вы должны захватить эту промежуточную точку, чтобы вы могли вызвать функцию позже с соответствующей I.
Что вам нужно знать первым?
- Переменная область
- Концепция обратных вызовов (я написал Руководство по этому мнению !)
Если вы ищете техническое объяснение закрытия, Руководство по MDN Вероятно, лучше всего.
Закрытия имеют тот же процесс, что и отправка по почте.
Давайте посмотрим на какой-то базовый код, который использует закрытие для почты пакета.
Функция AddressPackage () – это закрытие ! Его можно назвать в любое время после того, как функция Packbox была вызвана. Он также имеет доступ к переменным и аргументам со временем, когда Packbox () изначально называли.
Обратите внимание, как вывод Console.log не показывает до строк 14 и 15? Это чрезвычайно важно. Если вы запустите этот код после строки 11, вы бы просто увидели «положить трикотаж в коробку». Не было бы ошибок, но закрытие, адресата (), не будет работать в этой точке.
Когда вы отправляете по почте пакет, вы, вероятно, согласитесь, что ваша работа не выполняется, пока пакет не заполнен, а адрес написан. Аналогично, функция Packbox () ждет, пока не будет также вызвана замыкание. Давайте пройдем через эту строку.
Линия 11: Вы создаете переменную братгифт, который является экземпляр функции Packbox (). Вы отправляете Джерси своему брату.
Строка 3: Ваш код регистрирует заявление о Джерси.
Строка 8: Функция Packbox () возвращает … другая функция? Хм?
Давайте остановимся здесь и предположим, что линия 13 еще не бежит. Вот что происходит: функция Packbox () не будет возвращать строку «Готов к отправке», пока вы также не позвоните функции адреса () с аргументом. Также как есть два шага для отправки пакета: сначала, заполняя его и во-вторых, обращаясь к этому. Ваша посылка бесполезна, если у него нет содержимого или не имеет адреса! Это, как говорится, вы не обязательно должны обратиться пакет непосредственно после заполнения его содержимое. Вы можете подождать несколько дней, прежде чем решать ее. Вам может потребоваться пойти на компьютер, чтобы посмотреть адрес. Вы можете ждать вашего брата официально изменить свой адрес!
Несмотря на это, если не обратиться пакет сразу, это не означает, что пакет будет каким-то волшебным опустошить себя. Содержание все еще будет там, когда вы вернетесь к ее решению! Итак, в любое время мы называем Sourtgift, первый аргумент, Джерси, все еще будет доступен.
… жду … Ожидание … Теперь давайте запустим строку 13.
Строка 13: Хорошо, давайте закончим этот пример ! Вы готовы добавить адрес, поэтому вы называете Brothdgift и предложите адрес в качестве аргумента. Помните из строки 11, братгифт – это экземпляр Packbox с аргументом «Джерси». Поэтому, когда вы это называете, вы предлагаете другой аргумент, который затем будет отправлен на закрытие: CARDPACKAGE ();
Строка 3: Console.log покажет, так как мы теперь запустить код из строки 13.
Строка 4: Теперь мы предлагаем второй аргумент для адресата ();
Линия 6: AddressPackage регистрирует оператор, связанный с аргументом адреса.
Строка 8: Оператор возврата может стрелять в этот экземпляр.
Опять же, закрытия позволяют нам иметь этот промежуточный экземпляр, когда один аргумент был заполнен, но братгифт оставлен невыполнен, пока мы не добавим второй аргумент. Если мы хотим, чтобы сделать это в одной строке , Мы должны написать: packBox ( ‘джерси’) ( ‘123 Main Street, Anywhere USA 01234’);
Еще один пример
Давайте предположим, что вы хотите отправить подарок каждому члену вашей семьи. Вы можете упаковать каждую коробку, прежде чем добавлять адреса к каждому. Это то, что похоже в коде.
Еще одна волшебная особенность закрытия! Каждый экземпляр способен использовать правильный подарочный элемент с правильным адресом, даже думал, что мы запустим функцию с 4 отдельными пар подарочными/адресами. В традиционной функции нет концепции памяти. Вам нужно будет явно повторять исходные подарки в строках 6-15, если вы хотите использовать традиционную функцию.
Где вы будете использовать это
Вы часто встречаете закрытия в Node.js. Если вы просто заинтересованы в интернет-конце, подумайте на наш оригинальный пример. Если вы хотите написать функцию, которая рассматривает пользовательский ввод на двух отдельных этапах вашего приложения, вы можете учитывать закрытие!
Вам понравилось это руководство? Или у вас проблемы с другой работой JavaScript? Дайте ему сердце и дайте мне знать в комментариях!
Ищете другие концепции JavaScript объяснили? Проверьте эти прошлые статьи в серии.
JavaScript обещания объясняются азартными играми в казино
Модель-контроллер (MVC) объясняется за счет заказа напитков в баре
Обратный вызов JavaScript объяснил использование миньонов
Оригинал: “https://www.freecodecamp.org/news/javascript-closures-explained-by-mailing-a-package-4f23e9885039/”