Доброго времени суток, друзья. Часто ли на собеседовании по JavaScript вас спрашивают, что такое замыкание? Возникают ли у вас затруднения при ответе на этот вопрос? Может вы только начали изучать JavaScript и хотите разобрать эту «непонятную» тему? В данной статье мы будем идти последовательно, от теории к практике и на реальных примерах разберем замыкание и как оно работает в JavaScript. Приступим.
Лексическая область видимости
Чтобы понять, что же такое замыкание, потребуется начать с определения лексической области видимости (lexical scope). В JavaScript лексической областью видимости является та область видимости, которая используется при разборе на лексемы. Это означает, что дочерняя область имеет доступ к переменным родительской области. Например, функции имеют доступ к переменным в контексте той области, которой она была вызвана. Напишем функцию, которая будет складывать два числа.
Пример:
let a = 10
let b = 2
const sum = () => {
let a = 2
return a + b
}
sum() // 4
В примере выше мы объявляем две переменные a и b. При вызове функции sum() неожиданно получаем результат 4. Давайте подробно разберем, что происходит внутри функции. Вызывая sum(), первым делом JavaScript производит поиск внутри локальной области видимости, где находит переменную a, но при этом не находит переменную b. Переменная b не инициализирована в этой области, поэтому JavaScript продолжает поиск, поднявшись на уровень выше во внешнюю область видимости, в которой она имеется. Даже если этот пример был бы более сложным и состоял из нескольких вложенных функций, JavaScript продолжал подниматься выше по областям видимости в поиске нужных переменных. Данный механизм и называется лексической областью видимости.
Замыкание
После того как мы разобрались с понятием лексической области видимости, можно перейти к самому понятию замыкания в JavaScript. По своей сути замыкание (или более полное название лексическое замыкание) — это способность функции получать данные из своей лексической области видимости и возможность использовать ее даже когда данная функция была выполнена вне ее лексической области.
Пример:
const car = () => {
const title = "ЗИЛ"
const getTitle = () => {
console.log(title)
}
return getTitle
}
const myCar = car()
myCar() // ЗИЛ
Выше мы написали функцию car(), которая имеет в локальной области видимости переменную title и функцию, которая получает переменную title, используя механизм лексической области видимости. Давайте пошагово посмотрим, что происходит при вызове car().
Переменная title существует в памяти только в момент вызова car(). Когда происходит вызов функции getTitle(), переменная title уже не должна существовать в памяти т.к. функции car() уже нет, но благодаря замыканию getTitle() как бы «запоминает» значение переменной извне.
Важно! Сама концепция замыканий является следствием решения в JavaScript так называемых фунарг-проблем.
Заключение
Надеюсь, что теперь вы имеете представление о замыкании в JavaScript и о лексической области видимости. Для написания качественного кода и прохождения собеседований данная информация будет вам очень полезна. Учитесь, думайте, пишите код. Удачного кодинга, друзья!
Подписывайтесь на наш канал в Telegram для получения самой последней и актуальной информации.
Комментарии: