Понимание закрытия в JavaScript (с вкусной мексиканской едой)

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

Вот несколько разных определений закрытия, которую я столкнулся, чтобы действительно сверлить в голову, что закрытие определяется как:

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

• Закрытие – это сочетание функции и лексической среды, внутри которой была создана функция.

• Закрытие – это внутренняя функция, которая имеет доступ к переменным внешних функций.

Закрытие имеет доступ к 3 разным областям; Его собственный объем и переменные, его охватывающие функции и переменные, а также глобальные объема и его переменные. Закрытие также имеет доступ к параметрам аргумента внешней функции.

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

function takeOrder(mexicanDish) {
  var orderCall = "Here is your " + mexicanDish + " with ";

  function insertIngredient(mainIngredient) {
    console.log(orderCall + mainIngredient);
  }

  return insertIngredient;
}

var steakBurrito = takeOrder('burrito');

steakBurrito('steak'); // "Here is your burrito with steak"

Когда мы впервые позвоним наше Вождение () Функция, мы передаем это аргумент типа мексиканской еды, которую мы хотим. Это может быть все, что они предлагают; Taco, Burrito, Quesadilla …. Вы получаете идею.

Дело в том, когда мы называем Вождение («Буррито») , он возвращается нам функцию, вставка () . Мы устанавливаем это равно переменной, что мы будем вызывать позже, названные Steakburrito. потому что это то, что будет выглядеть наш окончательный заказ. Таким образом, вы можете себе представить, что наша переменная, Стейкберрито действительно просто Вставка () Функция в маскировке, ожидая, чтобы быть вызванным с помощью лечения.

Прежде чем мы позвоним этой функции, мы можем наблюдать, что внутренняя функция, Вставка () держит переменную ordercall Это было написано в нашей внешней функции, Вождение () Отказ

Наконец мы называем Steakburrito () и пройти в основном ингредиенте «Стейк» , что приводит к нашей функции, войдя на наш финал ordercall Отказ

На некоторых языках это вернуло бы ошибку, потому что мы технически уже вызывали и бегали Вождение () Когда мы присваиваем его нашей переменной, и она больше не должна быть доступна, потому что функция завершила его выполнение. Но благодаря магии замыкания в JavaScript наша маленькая внутренняя функция все еще удерживает дорогую жизнь в переменной во внешней функции. И это, по сути, какое закрытие!

Для ясности, и потому что я все еще довольно голоден, мы также можем заказать куриное тако!

var chickenTaco = takeOrder('taco');
chickenTaco('chicken'); // "Here is your taco with chicken"

Существует тонна практического использования для закрытия и более сложных способов их реализации. Это был просто простой пример, который помог мне определить, какое закрытие находится на базовом уровне. Надеюсь, это может оттолкнуть кого-то над горлом, а в момент понимания A-HA в JavaScript!

Оригинал: “https://dev.to/swergi0/understanding-closures-in-javascript-with-delicious-mexican-food”