Закрытие JavaScript для родителей, которые не знают JS

Если вы изо всех сил пытаетесь понять концепцию замыканий, это руководство для вас.

Имейте в виду, обязательным условием является испечь кексы. Испеките их для себя, своего питомца или ребенка. Когда консоль сообщает «Да, наслаждайтесь кексом!», кекс должен быть съеден в соответствии с родительскими правилами. Я бы посоветовал испечь несколько партий, потому что на протяжении всего урока будут часты ошибки. После украшения кексов вернитесь, чтобы завершить обучение.

Важно! Крайне важно, чтобы ваш ребенок не ел слишком много сладких закусок. Тщательно проверьте код, прежде чем вставлять его в консоль браузера.

Ограничьте ребенка тремя кексами

Вставьте следующий фрагмент в консоль. (Если ребенок окунул пальцы в тесто, увеличьте childHasEaten до 1.)

// track how many cupcakes have been eaten; so far, none
let childHasEaten = 0;
// child has requested a cupcake
const mayChildEatACupcake = function() {
  // more than 3, the kid has to be cut off
  if (childHasEaten >= 3)
    return console.log(`${childHasEaten} is enough. Eat some veggies!`);
// track consumed cupcakes
  childHasEaten++;
// let the child eat a cupcake!
  return console.log("Yes, enjoy a cupcake!");
};

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

mayChildEatACupcake();

Это сработало! Все, что для этого потребовалось, — это инкрементная переменная, одно функциональное выражение, оператор if и два журнала консоли. Возьмите кекс, вы его заслужили!

О, палочки корицы!

Ваша дочь Бекки съела два кекса. Джоуи в углу плачет о том, как несправедливо, что у его старшей сестры двое, а у него только один. Это несправедливо. Давайте решим эту проблему быстро, очень быстро. Вбейте следующее в консоль.

// track how many cupcakes have been eaten; so far, none
let beckyHasEaten = 0;
let joeyHasEaten = 0;
// Becky has requested a cupcake
const mayBeckyEatACupcake = function() {
  // more than 3, the kid has to be cut off
  if (beckyHasEaten >= 3)
    return console.log(`${beckyHasEaten} is enough. Eat some veggies!`);
  // track consumed cupcakes
  beckyHasEaten++;
  // let the child eat a cupcake!
  return console.log("Yes, enjoy a cupcake!");
};
// Joey has requested a cupcake
const mayJoeyEatACupcake = function() {
  // more than 3, the kid has to be cut off
  if (joeyHasEaten >= 3)
    return console.log(`${joeyHasEaten} is enough. Eat some veggies!`);
  // track consumed cupcakes
  joeyHasEaten++;
  // let the child eat a cupcake!
  return console.log("Yes, enjoy a cupcake!");
};

Затем запустите mayBeckyEatACupcake() или mayJoeyEatACupcake(), чтобы отслеживать обоих дочерних элементов.

// every time a child requests a cupcake, run their command
mayBeckyEatACupcake();
mayJoeyEatACupcake();

Это сработало! В этом раунде потребовались две инкрементные переменные, два функциональных выражения, два оператора if и четыре журнала консоли. Бекки съела всего 5 кексов, а Джоуи остался доволен, съев четыре. Дети прыгают от стен, но все хорошо. Возьмите кекс, вы его заслужили!

О пикси палочки!

Твоя лучшая половина зашла на кухню и попросила кексы. В этот момент вы понимаете, что написанный код не будет хорошо масштабироваться. Соседские дети в любой момент позвонят в дверь, и отследить всех будет непросто. Похоже, что размер файла вырастет, а сложность возрастет, если мы продолжим использовать текущий паттерн — несколько функциональных выражений, ifs и журналы консоли; много повторяющегося кода. Решение «очень быстро» только усугубило проблему. Хорошие новости, у тебя много кексов.

Время масштабирования для массового потребления кексов

И мы сделаем это, используя замыкание. Ботаны связывают замыкания с шаблоном модуля. Шаблон модуля относится к небольшим единицам независимого повторно используемого кода. Они ботаники, а мы родители, так что давайте двигаться дальше.

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

Шаблон закрытия кекса

Хорошо. Прежде чем мы начнем, предупреждение о том, что замыкание может выглядеть и вести себя странно. Чтобы создать элементарный счетчик, требуется примерно дюжина строк кода пекаря. Мы могли бы подвести итоги на бумаге ручкой, но мы родители, и невзгоды, такие как усталость от JavaScript, нас не останавливают. Давайте катиться!

Вот несколько примечательных моментов, о которых следует помнить при просмотре фрагмента…

  • Функция с именем inner() была вложена внутрь функции. Внутренняя функция — это ребенок, а внешняя — это родитель. Ой… родитель держит ребенка. Как мило!
  • If if (childHasEaten ›= 3) return console.log(`${childHasEaten} достаточно. Съешьте немного овощей!`); был перемещен наружу inner() это не сработает. Как я упоминал ранее, здесь происходят странные вещи. Место, где размещаются объявления переменных и функций, важно (умники называют это лексической областью видимости). Возможно, подъем переместил его наверх, и теперь функция inner() выполняется заранее и childHasEaten сообщает undefined. Трудно сказать, но нам лучше двигаться дальше, потому что соседские дети сейчас в вашем доме, разглядывая кексы. [ Вернитесь позже и послушайте, как MPJ объяснит подъем. ]
  • Мы вернулись к одному функциональному выражению, одной инкрементной переменной и оператору if и двум журналам консоли. Да!
// child has requested a cupcake
const mayChildEatACupcake = function() {
  // track how many cupcakes have been eaten; so far, none
  let childHasEaten = 0;
  // 👶being held by parent
  function inner() {
    // more than 3, the kid has to be cut off
    if (childHasEaten >= 3)
      return console.log(`${childHasEaten} is enough. Eat some veggies!`);
    // track consumed cupcakes
    childHasEaten++;
    // let the child eat a cupcake!
    return console.log("Yes, enjoy a cupcake!");
  }
  // respond to child
  return inner;
}
// assign each individual
const becky         = mayChildEatACupcake();
const joey          = mayChildEatACupcake();
const betterhalf    = mayChildEatACupcake(); // sometimes the better half acts like a child
const neighborKidA  = mayChildEatACupcake(); 
const neighborKidB  = mayChildEatACupcake(); 
const neighborKidC  = mayChildEatACupcake(); 
const neighborKidD  = mayChildEatACupcake(); 
// do not, whatsoever, add your name here and cut yourself off 
// from the sugary goodness cupcakes bring to your life

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

// every time the child requests a cupcake, run their assigned command
becky();
joey();
betterhalf();
neighborKidA();
neighborKidB();
neighborKidC();
neighborKidD();

Все хорошо! Ну, если не считать того, что Бекки съела 8 кексов, а Джоуи съела 5 кексов. Вероятно, пора заставить их выпить воды, чтобы гидратироваться, и отправить их на улицу.

Вывод

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