Освоение JavaScript 🧑💻: Закрытия

Привет всем 👋, надеюсь, у вас все хорошо.

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

ЛЕКСИЧЕСКАЯ ОБЛАСТЬ ВИДИМОСТИ ✍️

Прежде чем непосредственно объяснять, что такое замыкания, следует объяснить понятие области видимости и лексической области видимости.

Под областью видимости функции понимается та область кода, где ее переменные «видны» и могут быть использованы.
Если внутри одной функции создается другая функция, то создается еще одна внутренняя область видимости, и так далее: это называется цепочкой областей видимости.

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

Например

const life = () => {
  const pastEvents = 'past'

  //console.log(actualEvents) this will create an error because that inner variable is not accesible here

  const present = () => {    
    const actualEvents = 'present'

    console.log(pastEvents, actualEvents)//ok
    //console.log(futureEvents) same for this one

    const future = () => {
      const futureEvents = 'future'

      console.log(pastEvents, actualEvents, futureEvents)//ok      
    }

    future()
  }

  present()
}

life()
/*
Outputs:
  past present
  past present future
*/
Войти в полноэкранный режим Выйти из полноэкранного режима

Как видите, во вложенной группе функций внутренние функции имеют доступ к переменным и другим ресурсам своей родительской области видимости.

ЗАКРЫТИЯ 🪆

Давайте внесем некоторые изменения в предыдущий код:

const life = () => {
  const pastEvents = 'past'

  const present = () => {    
    const actualEvents = 'present'

    console.log(pastEvents, actualEvents)

    const future = () => {
      const futureEvents = 'future'

      console.log(pastEvents, actualEvents, futureEvents)  
    }

    return future
  }

  return present
}

const newFunc = () => {
  //different scope
  const newLife = life()
  const future = newLife()

  future() 
}

newFunc()
/*
Outputs:
  past present
  past present future
*/
Вход в полноэкранный режим Выход из полноэкранного режима

Новые функции, созданные в функции newFunc, имеют доступ к переменным pastEvents, actualEvents и futureEvents, даже если они находятся в другой области видимости.
Это происходит потому, что функции future и present являются замыканиями: когда они присваиваются переменным (в нашем случае newLife и future), они закрывают (отсюда термин замыкание) переменные своей лексической области видимости.

Благодаря этому замыкания эффективны для памяти, что позволяет экономить повторения кода.
Вот еще один пример:

const addTo = x => y => x + y //x = outer func; y = inner.
const addToTen = addTo(10)
addToTen(3) // returns 13
Вход в полноэкранный режим Выход из полноэкранного режима

Еще одно преимущество, которое они приносят, — это инкапсуляция данных:

const createCounter = () => {
  let count = 0

  return {
    increment() {
      count++
    },
    decrement() {
      count--
    },
    showCount() {
      console.log(count)
    }
  }
}

const myCounter = createCounter()

for(let i = 0; i < 100; i++)
  myCounter.increment()

myCounter.decrement()

console.log(myCounter.count)//returns undefined
myCounter.showCount()//returns 99
Вход в полноэкранный режим Выход из полноэкранного режима

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

ВЫВОДЫ

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

Оцените статью
devanswers.ru
Добавить комментарий