Замыкание

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

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

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

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

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

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

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

Результат

Loading...

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

Видео

Примеры

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

Счётчик

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

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

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

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

Результат

Loading...

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

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

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

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 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()
}

Результат

Loading...

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

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

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

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

Результат

Loading...

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

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

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

function learnJavaScript() {
  let phrase = x => {
    return y => {
      return x + ' ' + y
    }
  }

  hello = phrase('Hello')
  return hello('World')
}

Результат

Loading...

Итого

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

Проблемы?

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

Вопросы

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

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

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

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

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

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

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

Ссылки

1. Learn JavaScript
2. MDN Web Docs
3. Замыкания JavaScript

Contributors ✨

Thanks goes to these wonderful people (emoji key):

IIo3iTiv

Dmitriy Vasilev 💵

Resoner2005 🐛 🎨 🖋

Navernoss 🖋 🐛 🎨