Что такое замыкание в javascript

Замыкания в JavaScript используются довольно часто, и вы, наверняка, уже сталкивались с ними. Они позволяют делать код более выразительным и лаконичным. В какой-то степени, замыкания могут показаться сложной темой, но в данной статье мы постараемся разобраться с ними. Перед знакомством с этой темой необходимо хорошо понимать, какие особенности имеет область видимости переменных в JavaScript.

Что такое замыкание

Замыкание — это функция, объявленная внутри другой функции и имеющая доступ к переменным внешней (вмещающей) функции. Замыкание имеет доступ сразу к трем областям видимости:

к своей собственной области видимости (переменные, объявленные внутри замыкания);
к области видимости внешней функции (переменные, объявленные внутри внешней функции);
к глобальной области видимости.

Внутренняя функция имеет доступ не только к переменным внешней функции, но и к параметрам внешней функции. Обратите внимание, что внутренняя функция не может использовать объект arguments внешней функции, однако, имеет доступ к параметрам внешней функции напрямую.

Простыми словами замыкание — это функция, описанная внутри другой функции.

Пример замыкания в JavaScript:

 function showName(firstName, lastName) < var nameIntro = "Your name is "; function makeFullName() < return nameIntro + firstName + " " + lastName; >return makeFullName(); > showName("Michael", "Jackson"); // Your name is Michael Jackson

Замыкания также нередко используются в jQuery:

 $(function() < var selections = []; $('.niners').click(function() < selections.push(this.prop('name')); >); >);

Правила и побочные эффекты замыканий

Замыкание имеет доступ к переменным внешней функции даже после ее выполнения.

Одним из наиболее тонких моментов, связанных с замыканиями, является то, что внутренняя функция продолжает иметь доступ к области видимости внешней даже после того, как внешняя выполнилась.

Это означает, что даже после того, как внешняя функция выполнилась, внутренняя функция все еще может быть вызвана и она все еще имеет доступ к переменным внешней функции.

Замыкания хранят ссылки на переменные внешней функции, а не фактические значения.

Такая интересная особенность позволяет описывать приватные переменные. Это способ впервые был предложен Дугласом Крокфордом:

 function user() < var name = 'Unknown'; return < getName: function() < return name; >, setName: function(newName) < name = newName; >> > var testUser = user(); testUser.getName(); // Unknown testUser.setName('John Smith'); // Изменяем значение приватной переменной testUser.getName(); // John Smith

Побочные эффекты, связанные с замыканиями

Т.к. замыкание хранит ссылку на переменную внешней функции, а не фактическое значение, могут возникать побочные эффекты, связанные с тем, что замыкание изменяет внешнюю переменную:

 function userIdGenerator(users) < var i; var uniqueId = 100; for (i = 0; i < users.length; i++) < users[i]['id'] = function() < return uniqueId + i; >> return users; > var testUsers = [< name: "Smith", id:0 >, < name: "Johnson", id:0 >, < name: "Thompson", id:0 >]; var testUsersIds = userIdGenerator(testUsers); var firstId = testUsersIds[0]; console.log(firstId.id()); // 103

В предыдущем примере, к тому времени, когда вызывается анонимная функция, значение i становится равно 3 (длина массива). Число 3 было прибавлено к значению переменной uniqueId, тем самым для всех элементов массива testUsers значение id стало равно 103, вместо предполагаемых 100, 101, 102.

Решением предыдущей проблемы может быть шаблон немедленно вызываемой функции (Immediately Invoked Function Expression — IIFE):

 function userIdGenerator(users) < var i; var uniqueId = 100; for (i = 0; i < users.length; i++) < users[i]['id'] = function(j) < return function() < return uniqueId + j; >(); > (i); > return users; > var testUsers = [< name: "Smith", id:0 >, < name: "Johnson", id:0 >, < name: "Thompson", id:0 >]; var testUsersIds = userIdGenerator(testUsers); var firstId = testUsersIds[0]; console.log(firstId.id); // 100 var secondId = testUsersIds[1]; console.log(secondId.id); // 101

Заключение

Замыкания — это очень интересный и крайне полезный прием программирования. Суть замыкания можно выразить так: в функции доступны все переменные той области видимости, в которой она была определена.

Замыкания позволяют реализовывать аналог приватных переменных, минимизировать выход переменных в глобальную область видимости. С другой стороны, неаккуратное использование замыканий может привести к побочным эффектам, описанным выше. Поэтому использовать их стоит крайне внимательно.

что такое замыкание js

«Замыкание» — это способность функции запоминать переменные, которые были определены внутри родительской функции, даже после того, как родительская функция была выполнена.

function createCounter()  // переменная, которую нужно запомнить let count = 0; function counter()  // увеличиваем нашу запомненную переменную count++; console.log(count); > // возвращаем функцию return counter; > // создаем новую функцию (с замыканием) const incrementCounter = createCounter(); incrementCounter(); // 1 incrementCounter(); // 2 incrementCounter(); // 3

В этом примере мы создали функцию createCounter() , которая создает другую функцию counter() . Внутри функции мы создали переменную count , которая была определена внутри родительской функции. Функция counter() возвращает значение count , увеличивая его на 1 . Когда мы вызываем createCounter() , она возвращает функцию counter() , которая имеет доступ к count благодаря замыканию. Каждый раз, когда мы вызываем incrementCounter() ,

Если мы создадим новый счетчик с помощью функции createCounter() , то отсчет для него начнется заново.

// Создали еще одну новую функци-счетчик const newIncrementCounter = createCounter(); newIncrementCounter(); // 1 newIncrementCounter(); // 2 newIncrementCounter(); // 3

Что такое замыкания в JavaScript и как они работают

Сегодня мы разберём что же такое замыкания в JavaScript и как они работают. Это тема, в которой теряются не только новички, но и даже более опытные разработчики. Поэтому предлагаю разобрать её детально.

Пример работы замыканий

Введём сначала функцию высшего порядка changeBalance(). Это функция, которая возвращает другую функцию:

Внутри объявим переменную balance, которая изначально будет равна 0:

И вернём из этой функции новую анонимную функцию, в которую мы передадим аргументом sum и в результате изменим balance на эту сумму:

Теперь посмотрим на ту магию, которая нам позволяет делать замыкание в случае такого использовании функции.

Создадим константу change, которая будет вызовом функции changeBalance(). change теперь станет функцией, которую мы описали выше. То есть функцией, которая примет sum и поменяет balance:

Давайте теперь посмотрим на её поведение, когда попытаемся вызвать эту функцию. Чтобы посмотреть на результат после изменения баланса выведем его в консоль:

Посмотрим что же будет происходить. Вызываем change и передаем ей параметры:

Вывод в консоль:

И вот тут начинает работать замыкание. Несмотря на то, что мы уже вернули функцию и она находится в глобальном контексте, мы все равно можем изменять внутри переменную balance. И более того, от вызова к вызову, наш баланс сохраняется и мы можем его менять.

Теперь на этом примере детально рассмотрим как все это работает по шагам. И как раз поймем где же находится это замыкание и что это.

Пошаговая работа замыканий

В рамках первого шага, в глобальном scope лежит функция changeBalance и константа change, а stack содержит только глобальный контекст.

Теперь начинаем исполнять код: объявляем функцию и переходим к выполнению функции changeBalance():

Что происходит на stack? Когда начинаем выполнять функцию в неё помещается changeBalance():

changeBalance()
global

Global → changeBalance

То есть эта функция при выполнении объявляет баланс и возвращает новую функцию. На этом исполнение changeBalance() заканчивается.

С точки зрения scope у нас есть scope под названием changeBalance, в котором определен balance. Две вещи, которые изменились: на stack поместился changeBalance() и в scope появился changeBalance — дочерний scope относительно глобального.

Теперь перейдем к шагу три, где мы уже вызываем наш change():

change()
global

Global → changeBalance
Global → change

И тут появятся вопрос, что change никак не сможет достучаться до balance в changeBalance, потому что они находятся на одном уровне. Так почему все ещё можно изменить баланс? На самом деле он не меняет balance в changeBalance. Он меняет balance, который находится в рамках нашего замыкания. По сути, когда мы вызываем change, он как бы носит за собой контекст своего создания, и, когда происходит вызов функции, он знает что balance в нём есть. Это фактически дополнительная переменная scope, которая у него присутствует. Вот эта связь, которая реализуется внутренними механиками JavaScript и называется замыканием.

При этом, в отличие от объявлений функции, замыканиями мы никак сами управлять не можем. Это механика, которая просто работает под капотом. Более того, извне мы никак до переменной balance достучаться не сможем. Единственный, кто имеет к ней доступ — это change.

Что же такое замыкание?

Замыкание — это комбинация функции и лексического окружения, в котором эта функция была определена.

Простыми словами: функция помнит в каком контексте она была создана и может его использовать.

changeBalance является лексическим окружением, она становится неразрывной частью change.

При этом важно понимать и помнить, что замыкание всегда имеет более высокий приоритет по сравнению с переменными родительских scope. Если мы в глобальных переменных объявим еще один balance, то он изменён не будет, потому что первостепенно функция change посмотрит своё замыкание, и, если есть в этом замыкании такая переменная, она будет изменена. Если нет, то она пойдет по цепочке искать этот balance во вне.

JavaScript с нуля — основы языка и практика для начинающих

— 18 часов коротких лекций по 10 — 15 минут

— 30 упражнений для закрепления на практике

— 14 тестов для проверки знаний

— Рейтинг ⭐ 4.9 на основании отзывов

— 30-ти дневная гарантия возврата денег

Замыкание

@serverSerrverlesskiy

Замыкание — это функция⚙️, у которой имеется доступ к внешней функции⚙️, даже после того, как работа внешней функции️ прекратилась. Замыкание нужно, чтобы обеспечить доступ внутренней функции к области видимости внешней функции️, но при этом закрыть доступ из внешнего окружения к переменным внутренней функции⚙️.

Требования для создания замыкания:

Внешняя функция, которая вызывается в коде.
Во внешней функции находится внутренняя функция.
В качестве результата внешняя функция возвращает внутреннюю.

Рассмотрим создание замыкания на примере:

Интерактивный редактор

function learnJavaScript()  
 const getFruit = () =>  
 let fruit = 'Banana', 
 show = () =>  
 return fruit
 > 
 return show
 > 
 let showFruit = getFruit() 
 return showFruit() 
 >

В примере мы создали внешнюю функцию getFruit ;
Внутри getFruit создали внутреннюю функцию show .
В качестве результата функция getFruit выдаёт функцию show .
Далее в коде мы присвоили результат функции getFruit переменной showFruit .
Т.к. результат работы getFruit является функцией, то showFruit становится не переменной , а функцией.
Результатом всей конструкции стала переменная fruit находящаяся внутри функции getFruit , она стала замкнутой. Теперь мы можем только узнать значение этой переменной , изменить её нельзя.

Видео

Примеры

Рассмотрим больше примеров для понимания.

Счётчик

Счётчик, самый простой пример, на котором можно рассмотреть работу замыкания.

Интерактивный редактор

function learnJavaScript()  
 const makeCounter = () =>  
 let x = 0 
 return () =>  
 return ++x
 > 
 > 
 const counter = makeCounter() 
 return counter() 
 >

Улучшенный счётчик

В качестве результата у нас будет не одна функция⚙️, а сразу несколько.

Интерактивный редактор

function learnJavaScipt()  
 let makeCounter = () =>  
 let x = 0 
 return  
 inc: () =>  
 return ++x
 >, 
 dec: () =>  
 return --x
 >, 
 val: () =>  
 return x
 > 
 > 
 > 
 let counter = makeCounter() 
 counter.inc() // 1 
 counter.inc() // 2 
 counter.inc() // 3 
 counter.inc() // 4 
 counter.dec() // 3 
 return counter.val() 
 >

Замыкание в цикле

Интерактивный редактор

function learnJavaScript()  
 let res = [] 
 for (let i = 0; i  5; i++)  
 res[i] = () =>  
 return i
 > 
 > 
 return res[2]() 
 >

Запоминаем фразу

Интерактивный редактор

function learnJavaScript()  
 let phrase = x =>  
 return y =>  
 return x + ' ' + y
 > 
 > 
  hello = phrase('Hello') 
 return hello('World') 
 >

Итого

Замыкания — одна из важнейших фундаментальных концепций JavaScript, её должен понимать каждый JS-разработчик. Понимание �� замыканий — это одна из ступеней пути к написанию эффективных и качественных приложений.

EnglishMoji!

Проблемы?

Пишите в Discord или телеграмм чат, а также подписывайтесь на наши новости

Вопросы

Что такое замыкание?

Конструкция
Функция, у которой имеется доступ к внешней функции
Концепция

В замыкании что на чём замыкается?

Функция на область видимости
Переменные в функции

Что нужно сделать, чтобы получить доступ к замкнутой переменной?

Опишу её и воспользуюсь
Она доступна
Переменную можно только просмотреть

Для того чтобы понять, на сколько вы усвоили этот урок, пройдите тест в мобильном приложении нашей школы по этой теме или в нашем телеграм боте.

EnglishMoji!

Ссылки

Learn JavaScript
MDN Web Docs
Замыкания JavaScript

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Что такое замыкание в javascript