Рубрики
Без рубрики

Как вы можете узнать закрытие в JavaScript и понять, когда их использовать

Изучение каких замыканий и как их применять. Теги с учебником, JavaScript, WebDev, начинающими.

Следуй за мной на Twitter , рад принять ваши предложения по темам или улучшениям/Крису

Если вы как я, вы слышите концепции, как Лексическая среда , закрытие , Контекст выполнения и ты как yep Я слышал, не могу вспомнить, что они Но я, наверное, использую это. И вы знаете, что, вы будете правильными. Вы, скорее всего, используете это, но кто может вспомнить эти термины в любом случае?

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

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

Давайте копаем глубже, как мы можем понять и даже применить эти условия, но не знаю, что их называют? Это плохое название? Может быть, в моем случае, речь идет о реализации Я визуальный учащийся, и мне нужно изображение, чтобы помнить вещи, или это не придерживается ..

Так что добро пожаловать в сумасшедшую поездку в мой мозг – давайте поговорим о закрытии:) – все на борту сумасшедшего поезда;)

Замыкание

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

Спасибо, профессор Но я едва понял слово

Хорошо, давайте посмотрим на какой-то код:

function outer() {
  // lexical environment
  let a = 1;
  return function inner(b) {
    return a + b
  }
}

То, что вы видите выше, это функция внешний () охватывает другая функция Внутренний Отказ Это не только охватывает Внутренний () Но также переменная А Отказ

Что так здорово по этому поводу?

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

Лексическая среда , звучит как лексикон, огромные и тяжелые книги. Покажите мне.

Хорошо, представьте, что мы называем код, как это:

const fn = outer();
fn(5) // 6

Над этим вспоминает А иметь ценность 1 Отказ

Хорошо, так что это все равно относится к А как частная переменная, но в функции?

Да, именно.

У меня есть идея, как это помнить:)

Да?

Коровы

Коровы?!

Да коровы в корпусе со внешней функцией в качестве корпуса и коров в качестве внутренней функции и частной переменной, как это:

Повар, медленно выходя.

Что мы можем использовать их для

Итак, мы получили некоторые вступления в закрытие, но давайте заявляем, что мы можем использовать их для:

  • Создание частных переменных , мы можем создать лексическую среду длиной после завершения выполнения внешней функции, это позволяет нам относиться к лексической среде, как если бы она была частными переменными в классе. Это позволяет нам написать код, как это:
   function useState(initialValue) {
     let a = initialValue;
     return [ () => a, (b) => a = b];
   }

   const [health, setHealth] = useState(10);
   console.log('health', health()) // 10
   setHealth(2);
   console.log('health', health()) // 2

Выше мы видим, как мы возвращаем массив, который обнародует методы как для возврата, так и для настройки переменной А из лексической среды

  • Частичное приложение Идея состоит в том, чтобы взять спор и не применять его полностью. Мы показали это в нашем самым первом примере, но покажем более общий метод частичный () :
  const multiply = (a, b) => a * b;

  function partial(fn, ...outer) {
    return function(...inner)  {
      return fn.apply(this, outer.concat(inner))
    }
  }

  const multiply3 = partial(multiply, 3);
  console.log(multiply3(7)) // 21

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

  console.log(multiply3(7)) // 21

Хорошо, я понимаю, как это работает, я думаю. Как насчет приложения, когда я на самом деле используй это?

Ну, это немного академической конструкции, он определенно используется в библиотеках и рамках.

Вот и все?

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

Только один пример?

Конечно, вот один:

  const baseUrl = 'http://localhost:3000';

  function partial(fn, ...args) {
      return (...rest) => {
        return fn.apply(this, args.concat(rest))
      }
  }

  const getEndpoint = (baseUrl, resource, id) => {
      return `${baseUrl}/${resource}/${id ? id: ''}`;
  }

  const withBase = partial(getEndpoint, baseUrl);
  const productsEndpoint = withBase('products')
  const productsDetailEndpoint = withBase('products', 1)

  console.log('products', productsEndpoint);
  console.log('products detail', productsDetailEndpoint);

Вышеуказанное является довольно распространенным сценарием, создавая конечную точку URL. Выше мы создаем больше Специализированные Версия с с base это частично применяет BaseUrl Отказ Затем мы продолжим, чтобы добавить конкретную идею ресурсов, как так:

   const productsEndpoint = withBase('products')
   const productsDetailEndpoint = withBase('products', 1)

Это не вещь, которую вы должен Используйте, но это приятно и может сделать ваш код менее повторяющимся. Это шаблон.

  • Изолировать часть вашего кода/пройти интервью JavaScript Для этого сначала покажем проблему, которая очень распространена в интервью JS. У меня тот же вопрос попросил меня в трех интервью подряд. Вопрос также можно найти, если вы истетете. Потому что угадайте, что, что процесс собеседования JavaScript нарушен.

Что вы имеете в виду сломанные?

Никто не заботится, если у вас многолетний опыт делая это и что и знает кучу каркасов. Вместо этого интервьюеры обычно проводят 5 минут Googlet JavaScript, чтобы спросить вас.

Похоже, они спрашивают о языке JavaScript, и это основные концепции. Разве это не хорошо?

Да, эта часть хорошая, но JavaScript имеет так много странно для этого, есть причина, потому что Крукфорд написал книгу под названием JavaScript в хороших частях, и что это очень тонкая книга. Есть определенно хорошие части, но и много странностей.

Вы собирались рассказать мне о проблеме собеседования?

Правильно, так вот код, вы можете угадать ответ?

   for (var i = 0; i < 10; i++) {
    setTimeout(() => {
      return console.log(`Value of ${i}`);
    }, 1000)
   }

1,2,3,4,5,6,7,8,9,10

Не нанял.

Это холодно, вы можете сказать мне, почему?

Setimeate асинхронный и называется после 1000 Миллисекунды. For-Loop выполняется сразу, так что к тому времени Setimeate называется Я Параметр будет иметь максимальное значение 10 Отказ Итак, он печатает 10 , 10 раз. Но мы можем исправить это, чтобы он печатает его восходящим способом.

Как?

Создавая объем, Изоляция В коде, как так:

   for (var i = 0; i < 10; i++) {
     ((j) => setTimeout(() => {
      return console.log(`Value of ${j}`);
    }, 1000))(i)
   }

Вышесказанное создает Я мгновенно Призывает Функция Е Xpression, IIFE (это выглядит правильно;)?)? ). Это достигает изоляции, посредством которого каждое значение Я связан с определением определенной функции и выполнением.

Существует альтернатива вышеуказанному решению, используя Пусть Отказ Пусть Ключевое слово создает Навыся код кода. Таким образом, код вместо этого выглядит так:

   for (let i = 0; i < 10; i++) {
    setTimeout(() => {
      return console.log(`Value of ${i}`);
    }, 1000)
   }

Спасибо Quozzo для указания этого.

Резюме

Хорошо, так что все это закрытие бизнесу о коров и заборах и конфиденциальности

И JavaScript;)

Оригинал: “https://dev.to/itnext/how-you-can-learn-closures-in-javascript-and-understand-when-to-use-them-2lk5”

Читайте ещё по теме: