Узнайте о замыканиях в JavaScript

В JavaScript есть паттерн, который мы используем постоянно, не замечая этого: Замыкание!

Замыкание возникает, когда вы используете внешнюю переменную во внутреннем блоке. Вот простой пример:

let count = 0

function increment() {
  count++ // closure here!
  return count
}

increment()

console.log(count) //==> 1
Войти в полноэкранный режим Выйти из полноэкранного режима

Замыкания могут пригодиться, когда вы хотите сохранить состояние функции.

Скажем, вы создаете видеоигру, и у вас есть функция, которая применяет телепортацию к заданному объекту в 2D-контексте:

function teleport(object, x, y) {
  object.x = x
  object.y = y
}
Войти в полноэкранный режим Выход из полноэкранного режима

Вы хотите иметь возможность телепортировать объекты в своей игре. Но возможный объем телепортации может быть разным. Вы можете создать функцию, которая возвращает новую функцию, ограничивающую количество вызовов функции teleport:

function teleportNTime(n) {
  let count = 0

  return function(object, x, y) {
    if (count === n) {
      console.log("can't teleport anymore!")
      return
    }

    teleport(object, x, y)
    count++
    console.log("count: ", count)
  }
}

const teleport2Time = teleportNTime(2)
const teleport3Time = teleportNTime(3)

Вход в полноэкранный режим Выход из полноэкранного режима

Две переменные представляют состояние teleport2Time:

  • аргумент, который мы передали teleportNTime; который равен n = 2.
  • переменная count.

Здесь сохраняется состояние, потому что каждый раз, когда мы телепортируемся, мы запоминаем счетчик и предел телепортации (n = 2).

const goku = { name: 'goku', x: 0, y: 0 }

teleport2Time(goku, 2, 4) //=> count: 1
teleport2Time(goku, 8, 10) //=> count: 2
teleport2Time(goku, 0, 0) //=> can't teleport anymore!
Вход в полноэкранный режим Выход из полноэкранного режима

Обратите внимание, что состояние teleport3Time не зависит от teleport2Time.

teleport3Time(goku, 2, 4) //=> count: 1
Вход в полноэкранный режим Выход из полноэкранного режима

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