написать впереди
Если вы изучаете интерфейс для начинающих, вы почувствуете, что HTML и CSS слишком просты и не сложны. Это потому, что вы не изучали JS. Слишком много концепций в JS очень запутывают в начале обучения, например, цепочка прототипов, замыкание и т. д., которые одновременно важны и сложны. Но после того, как вы поймете это, вы обнаружите, что это очень просто и легко понять.
Поскольку Сяолу ходил на собеседование во время летних каникул, каждое собеседование в основном необходимо, не только для того, чтобы знать теорию, но и для того, чтобы спросить вас о вашей практике в реальных проектах.Многие люди часто игнорируют эту часть реального боя.
Сегодняшний контент — это ключевой момент в JS, а также это обязательный тест на собеседованиях, он также часто используется в проектах, то есть у нас появляется сакральное «замыкание».
Возможно, вы не слышали об этом термине или, возможно, слышали его, но не понимаете его или как его использовать, тогда давайте воспользуемся анимацией, чтобы прояснить концепцию «замыкания».
карта разума
1. Что такое замыкание?
Чтобы выучить незнакомое понятие, мы должны сначала понять, что это такое? То есть что такое замыкание? Чтобы полностью понять замыкания, вы должны понимать область действия функции, механизмы повторного использования памяти и наследование области действия. Кратко поговорим об этих понятиях.
1.1 Объем функций
Понятие области действия, с точки зрения описания изображения, можно рассматривать как замкнутое пространство, и в этом замкнутом пространстве разрешены только некоторые операции, и это замкнутое пространство также называется частной областью действия. В JS выполнение функции создает в памяти частную область видимости — замкнутое пространство.
Например, если вы определяете переменную в функции, ее можно использовать только в частной области действия функции (то есть в закрытом пространстве). Пока эта область превышена, переменная не может быть найдена.
И после выполнения функции эта приватная область видимости (замкнутое пространство) будет уничтожена. Есть один случай, когда он не будет уничтожен, и это «замыкание», о котором мы поговорим позже.
1.2 Механизм восстановления памяти
Механизм утилизации памяти — это память, которая не используется, и наша система автоматически перезапускает ее, освобождая место для использования другими программами. Каковы правила утилизации?
На переменную или объект ссылаются, поэтому он не будет освобожден при сборе, потому что наличие ссылки означает, что он используется, и сборщик не будет собирать переменную или объект, на который ссылаются.
1.3 Наследование области
Так называемая область наследования, точно так же, как сын может наследовать имущество отца. Например, Xiaolu использует большой блок в качестве родительской области, а затем помещает маленький блок внутрь этого большого блока в качестве дочерней области. Мы оговариваем, что вещи из большой коробки можно получить из маленькой коробки, а большая коробка не может получить вещи из маленькой коробки, что называется наследованием области действия.
Что ж, после понимания вышеизложенных понятий, что такое замыкание, для вас больше не проблема.
Говоря простым языком, что такое замыкание, то есть функция определяется внутри функции. Внутренняя функция всегда поддерживает доступ к области действия внешней функции (маленький блок всегда может иметь доступ к большому блоку).
Выполнение функции формирует приватную область видимости для защиты приватных переменных внутри от внешнего вмешательства.Помимо защиты приватных переменных, он также может хранить некоторый контент.Этот режим называется закрытием.
Реализация анимации:
2. Какова функция замыкания?
Предположительно, вы все еще немного несведущи в замыканиях, это не имеет значения, мы продолжим узнавать больше. Какова основная функция замыканий? Зачем использовать замыкания?
Благодаря приведенному выше объяснению замыкания внешняя функция возвращает внутреннюю функцию, но она по-прежнему может получить доступ к области действия внешней функции, поскольку внешняя сохраняет ссылку. Что подводит нас к тому, где его можно использовать.
Разве не существует блочной области, которая не уничтожается? Мы можем использовать его для сохранения некоторого контента, а также для защиты некоторых частных переменных. Мы заключаем, что замыкания выполняют две функции, а именно защиту и сохранение.
3. Сценарии применения замыканий
Теперь, когда мы знаем, что функция замыкания заключается в сохранении и защите, где оно используется в реальных проектах?
3.1 Защитный эффект
Во время групповой разработки каждый разработчик помещает свой собственный код в частную область, чтобы предотвратить конфликты имен переменных между ними; методы, которые необходимо предоставить другим, доступны глобально через return или window.xxx .
Этот механизм защиты также используется в исходном коде jQuery.
3.2 Сохранение
Решение для закрытия вкладок. Мы часто используем вкладки на веб-страницах, но с этим есть проблема, и это проблема, вызванная индексацией, которая на самом деле такая же, как и классический вопрос интервью ниже.
4. Классические вопросы заключительного интервью
Что не так с индексацией, вызванной зацикливанием связанных событий? Как решить эту проблему?
Запустите программу в этот момент, и вы получите все значения len.
Почему возникает эта проблема и как мы можем ее решить?
Причина очень проста, все привязки событий асинхронны, при срабатывании события клика и выполнении метода цикл уже завершился.
Мы еще немного поговорим о том, что синхронно, а что асинхронно?
Синхронизация: Текущая задача в JS не завершена, и следующие задачи не будут выполнены, только когда текущая задача будет полностью выполнена, следующие задачи будут выполнены.
Асинхронный: текущая задача в JS не завершена и требует некоторого ожидания для завершения.В это время мы можем продолжить выполнение следующих задач.
решение:
Когда событие щелчка выполняется, значение i будет искаться в частной области. В это время в частной области нет i, и он вернется в глобальную область, чтобы найти его. В это время i глобального масштаба был изменен. Итак, чтобы создать частную область i .
Способ 1, способ закрытия. Замыкания наконец пригодятся для хранения приватных переменных.
Но решение закрытия имеет преимущества и недостатки. Преимущество состоит в том, что это можно решить, создав частную область (замыкание).После нескольких циклов создается несколько частных областей (замыканий).Затем каждая частная область имеет частную переменную i, а сохраненное значение - это цикл. значение .
Недостатком является то, что генерируется несколько приватных областей (куча памяти), которые не уничтожаются, что оказывает определенное влияние на производительность.
Второй метод заключается в использовании пользовательских атрибутов. Мы добавляем свойство индекса к каждому объекту и все.
Окончательное решение, это знание в ES6, потому что раньше в JS не было понятия блочной области видимости, но в ES6 переменные, объявленные Let, могут лучше решать вышеуказанные проблемы.
❤️ Не забывайте оставлять следы своего обучения [Нравится + Избранное + Комментарий]
Статья + анимация писалась несколько часов, ставьте лайк и поддержите. Хи-хи, если вам это не нравится, это показывает, что вы очень эгоистичны, и вы боитесь, что такую хорошую статью увидят другие. Просто шучу.
Вы можете подписаться на официальный аккаунт Xiaolu: «Xiaolu Animation Learning Programming», а фоновый ответ: «Ресурсы». Я пришлю вам копию материалов для самостоятельного изучения Сяолу и приглашу вас в группу бесплатного обучения!
Информация об авторе:
【Автор】：Сяолу
[Исходный публичный аккаунт]: Программирование обучения анимации Xiaolu.
[Введение]: вместе с Xiaolu изучите программирование с нуля с помощью анимации и представьте друзьям интерфейсный веб-домен, структуру данных и алгоритм, сетевые принципы и т. д. в простой для понимания форме. Сначала поставьте небольшую цель, создайте 1000 оригинальных технических статей по анимации и работайте вместе с друзьями, чтобы учиться вместе!Официальный аккаунт отвечает на «данные», чтобы получить множество материалов для самостоятельного изучения с нуля!
【Инструкции по перепечатке】: Пожалуйста, укажите источник перепечатки, спасибо за сотрудничество! ~