В предыдущей статье мы дали обзор предварительной эксплане. Прежде чем написать этот пост в блоге, мы планировали написать несколько классических случаев. Учитывая, что эти случаи являются более полными, у нас есть пост в блоге шаг за шагом, который легче выучить и углубленный JavaScript.
последовательность
Коллега пошел на собеседование, и интервьюер задал вопрос: вы пишете закрытие, и я прочитаю его? Итак, мой коллега быстро написал следующий код:
Кода -копия выглядит следующим образом:
функция fn () {
Alert («Привет, закрытие JavaScript !!!»); // Черт возьми, e Текст не очень хороший, вы можете написать слова закрытия только после поиска перевода
}
fn ();
Затем интервьюер покачал головой и сказал: «Как это можно назвать закрытием?» В конце концов, у них двоих был спор, и коллега ушел решительно. Что за интервьюер? (Эта история является чисто вымышленной, если есть какое -либо сходство, это чисто совпадение)
Закрытие может быть «высокой и сложной» технологией в глазах многих людей, но в глазах многих людей они могут считаться закрытием:
Пример 1:
Кода -копия выглядит следующим образом:
функция fn () {
return function () {
Alert ('Пример 1');
}
}
fn () ();
Пример 1 PS: этот не выглядит очень продвинутым, кажется, что этот человек не очень хорош в этом!
Пример 2:
Кода -копия выглядит следующим образом:
; (function () {
Alert ('Пример 2');
}) ();
Пример 2 PS: это выглядит более продвинутым, чем предыдущий, и перед первым кронштейном есть полуколон. Зачем добавлять полуколон? Ну, давайте сначала оставим этот вопрос, и мы поговорим об этом позже.
Пример 3:
Кода -копия выглядит следующим образом:
~ function fn () {
Alert ('Пример 3')
} ();
Пример 3 PS: это самый продвинутый, это так удивительно. Я читаю меньше, не лги мне!
Мастер LUN не очень хорош в чтении, и он может написать только эти три «закрытия». Я считаю, что блоггеры могут писать больше и лучше «закрытия»; Здесь сначала остановите мою ерунду, а затем изучите механизм функциональной работы. Кажется, что кто -то уже знает это, это должно быть применение. Я действительно не хочу добавлять эту область к названию, поэтому я всегда чувствую, что это почти значимо. Эти вещи изначально вместе, так почему я должен их повторить? Старая привычка, сначала загрузите код:
Кода -копия выглядит следующим образом:
var n = 10;
функция fn () {
предупреждение (n);
var n = 9;
предупреждение (n);
}
fn ();
Проще говоря, мы рисуем картинки (Master использует только программное обеспечение для рисования, которое поставляется с Windows. Если есть какие -либо лучшие, пожалуйста, рекомендуйте его блоггерам), чтобы проанализировать его:
Анализ 1
Из рисунка мы видим две области, одна из них-область окна (область верхнего уровня), а другая-личная область, образованная при вызове FN; Тогда что такое масштаб? Область на самом деле является средой для выполнения кода. Например, учебная среда ученика - это школа, которая эквивалентна его сферу. Если студент непослушный и часто идет в интернет -кафе, чтобы играть в игры ночью, он эквивалентен формированию частной среды, которая является интернет -кафе. Все в порядке! Эта Лизи такая до тех пор, пока она не будет похожа на саму хозяина, и она не может не вздохнуть: «Если вы не будете много работать, когда вы молоды, вас будут пнуть, когда вы вырастете». Давайте вернемся к теме. Фактически, определение функции Fn относится к описанию куска кода (красная коробка на рисунке). Когда этот FN называется (зеленая коробка на рисунке), будет сформирована прицел. Конечно, код в этой области также будет предотвращен до выполнения. Я не скажу вам, что эта область будет уничтожена после исполнения. Этот FN снова вызывается, и он также сформирует новую область, а затем предварительно планирует до выполнения, затем выполнение кода и, наконец, уничтожена после выполнения.
Понять закрытие
Мы знаем, что когда вызовет функцию, частная область (среда выполнения) будет сформировать частную область (среда выполнения), и этот частный объем является закрытием. Оглядываясь назад, закрытие по-прежнему легендарное «высококлассное и нелегко получить»? Давайте оглянемся на первую историю интервью, и три примера, которые я написал, они на самом деле закрываются. Чтобы быть точным, эти три примера являются общими формами закрытия.
Сценарии приложения
Теперь есть требование: на странице HTML есть тег UL, а в UL есть 5 тегов LI. Вам требуется любой щелчок по LI, и индекс (индекс начинается с 0), где появляется щелчок LI. Структура HTML выглядит следующим образом:
Кода -копия выглядит следующим образом:
<ul id = "ul">
<li> Список 1 </li>
<li> Список 2 </li>
<li> Список 3 </li>
<li> Список 4 </li>
<li> Список 5 </li>
</ul>
Я был умным и быстро написал следующий код:
Кода -копия выглядит следующим образом:
var lis = document.getElementbyId ('ul'). getElementsbytagname ('li');
for (var i = 0, len = lis.length; i <len; i ++) {
lis [i] .onclick = function () {
оповещение (i);
};
}
Окончательный тест, чтобы увидеть, идеально ли это требование:
Я обнаружил, что независимо от того, сколько раз я щелкнул, этот результат будет появляться в конце. Желаемый результат: нажмите «Список 1».
(Как это выглядит, когда прототип не работает в качестве требований к проектированию во время демонстрации)
Что я должен делать? Почему 5 всегда появляются? Это очень правильно в теории! Давайте нарисуем картинку для анализа:
На самом деле, мы просто даем каждому Li Onclick, что на самом деле является строкой описания функции, которая сохраняет. Содержание этой строки - содержание в красной коробке изображения выше. Если вы все еще не верите в это, у меня есть картина и правда:
Введите: Лис [4]. Когда мы нажимаем на пятый список, он фактически эквивалентен LIS [4] .onclick (). После вызова этой описания функции мы знаем, что когда функция выполнена, она сформирует личный объем. В этом частном масштабе он будет сначала предварительно избавлен, а затем будет выполнен код. В настоящее время мы будем искать я. Нет я под текущей частной областью, а затем нахожу я под прицелом окна, поэтому 5 появляется каждый раз, когда вы нажимаете.
Очевидно, приведенный выше код не может соответствовать этому требованию. Неправильно написать наш код. Давайте подумаем о причинах проблемы? На самом деле, причина в том, что каждый раз, когда я щелкну, это читается в окне I под окном. В настоящее время значение этого я уже 5, поэтому доступен следующий код:
Метод 1:
Кода -копия выглядит следующим образом:
var lis = document.getElementbyId ('ul'). getElementsbytagname ('li');
Функция fn (i) {
return function () {
оповещение (i);
}
}
for (var i = 0, len = lis.length; i <len; i ++) {
lis [i] .onclick = fn (i);
}
Метод 2:
Кода -копия выглядит следующим образом:
var lis = document.getElementbyId ('ul'). getElementsbytagname ('li');
for (var i = 0, len = lis.length; i <len; i ++) {
; (function (i) {
lis [i] .onclick = function () {
оповещение (i);
};
})(я);
}
Метод 3:
Кода -копия выглядит следующим образом:
var lis = document.getElementbyId ('ul'). getElementsbytagname ('li');
for (var i = 0, len = lis.length; i <len; i ++) {
lis [i] .onclick = function fn (i) {
return function () {
оповещение (i);
}
}(я);
}
Я написал три метода за один дыхание, и идеи одинаковы, то есть сохранить эту переменную в частной переменной. Здесь я буду говорить только о методе второй. Конечно, если вы поймете одного из них, вы поймете остальное. Согласно соглашению, давайте нарисуем картину и анализируем ее шаг за шагом:
Я подробно описал все выполнение кода. Следует отметить, что атрибут OnClick каждого LI должен занимать (i) {…}) (i). Когда эта функция будет выполнена, она не будет разрушена, потому что она занята внешним LI (этот LI находится под прицелом для окна), поэтому этот объем не будет уничтожен. При нажатии на любой li, function () {alert (i); } будет выполнен, и сформируется также сфера. В этом прицеле нет я. Он перейдет в (function () {…}) (i), чтобы найти I, и, наконец, найти I в формальном параметре, и значение этого формального параметра передается во время цикла FO; Этот пример умно использует закрытие для хранения значения, идеально решая проблему.
PS: я только что сказал (function (i) {…}) (i) Почему я добавил полуколон перед ним, чтобы не допустить, чтобы предыдущее утверждение забыло добавить полуколон, который заставляет JavaScript делать ошибки во время анализа, и это все. Конечно, одним из вышеперечисленных сценариев приложения является принцип реализации вкладок. Могут быть и другие методы реализации, такие как пользовательские методы атрибутов и поиск индексов через отношения узлов DOM. Мастер принимает этот метод, просто чтобы углубить его понимание закрытия.
Суммировать
Закрытия не такие высокие, как легендарные. Ядро состоит в том, чтобы понять определения и вызовы функций. Новая частная область будет сформирована при вызове функции. Когда прицел занят наружными, прицел не будет разрушен. Мастер Лу читает очень мало. Если есть какие -то неправильные вещи, пожалуйста, поправьте меня блоггерами. В то же время я хотел бы поблагодарить вас за поддержку статьи Мастера Люка.