Говоря о замыканиях и асинхронности

Упростите сложные знания------------------------------------------------------------------------ westlife

Введение ----- Знаешь, почему Чанъэ такой непостоянный? ? ? Из-за Чейнджера, хахахаха!

В js есть три большие горы, эти три большие горы --- объем/замыкание, прототип, асинхронный и однопоточный.Поколение за поколением интерфейс Xiaobai был в тупике, Xiaobai играл дух движущихся гор Yugong, царапая How много волос. Сколько нейронов повреждено. . . . .

Сегодня я расскажу о замыканиях, как я их понимаю.

Прежде всего, условия закрытия: их два.

1. Вложенная функция функции

2. Переменная объявляется в функции снаружи, а функция вызывается внутри.

Покажите вам пример

function foo(){
    var a  = 10;
    return function(){
       return ++a
    }
}
var c = foo();
console.log(c());
console.log(c());

Это простое закрытие, вы можете видеть, что 11 и 12 печатаются под отладчиком браузера;

(ps: Спасибо за исправление восторженным пользователям сети, ошибка исправлена)

Так что же делают замыкания?

Функция 1: сохранить данные, которые собираются уничтожить

Возьмите небольшой каштан:

Вы помните, как делать вкладки? Ну да, это надо делать многим, это не что иное, как нахождение индекса кнопки и индекса области содержимого, взаимно однозначное соответствие, цикл for обходит кнопки, и при нажатии на кнопку, есть событие, поэтому генерируется асинхронный цикл for. Значение i не может соответствовать значению i события click. Здесь мы используем трюк и добавляем индекс к каждой кнопке, а область содержимого, соответствующая индексу, отображается.Однако есть проблема.Нам нужно добавить переменную в группу кнопок как индекс,если мы не хотим этот индекс,можем ли мы реализовать его другими способами?Ответ что можем,можем реализовать с блочной областью es6, конечно, мы также можем реализовать его с замыканиями

Как показано на рисунке: Обычно способ реализации вкладок

Используйте замыкания для достижения

(function(){
    var wrap = document.querySelector('#wrap');
    var pic = document.querySelector('#wrap');
    var aBtn = wrap.getElementsByTagName('li'); //获取所有li组
    var aPic = pic.getElementsByTagName('div'); //获取所有div组
    for(var i = 0;i<aBtn.length;i++){
       !function(n){
             aBtn[n].onclick = function(){
             aBtn[n].style.display = 'block'
            }
        }(i)
    }
}()

Разве не удивительно, что используется переменная i. Первоначально переменная i становится 9 после цикла for (потому что событие будет генерировать асинхронность); хе-хе-хе... Используя замыкание, ловко понял, что i стоит использовать снова

Роль 2: Конфиденциальность

демонстрация: напишите фрагмент js-кода для имитации первого теста на получение водительских прав, заполните вопрос и покажите эффект от ответа

Предположительно у каждого есть идея. Сложите все ответы в массив. Длина массива равна длине вопроса. В массиве хранится правильный ответ. Когда пользователь нажимает кнопку, ответ на вопрос в этом момент отображается рядом с ним.Но эти данные не безопасны, кто-то, кто немного знает код, выведет ответ на консоль, как сохранить конфиденциальность данных, -- закрытие

!function(){
var aBtn = document.getElementsByClassName('btn');//获取所有按钮
var arr = ["A","B","C","A"...........]  //存放答案数

for(var i = 0;i<aBtn.length;i++){
   !function(n){
        aBtn[n].onclick = function(){
            console.log("正确答案是:"+arr[n])
        }
    }()
}

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

На самом деле, если говорить прямо, замыкания — это всего лишь механизм сборки мусора, немного похожий на корзину на нашем компьютере. Когда переменная объявляется подлежащей уничтожению, замыкание может использоваться для сбора данных, которые должны быть уничтожены.

Тогда поговорим об асинхронности: выше тоже упоминалась асинхронность, наш js-код выполняется в одном потоке, сверху вниз, но когда происходит асинхронность. Код асинхронного выполнения позволит коду синхронного выполнения проходить ограниченно; точно так же, как светофор, мы можем пройти только после того, как пройдёт красный свет.

Условие, которое запускает асинхронность

1. ajax
2. мероприятие
3. setTimeout() setInterval()

Будет так много асинхронности. Если вы хотите услышать, как это сделать, пожалуйста, прослушайте следующую разбивку!