что такое распространение события event propagation
Погружение и всплытие событий
На этом занятии вы узнаете как происходит распространение событий в браузерной среде. Для начала давайте представим, что у нас есть вот такой документ, состоящий из трех вложенных элементов:
И мы на блок div вешаем обработчик:
который выводит в консоль имя тега элемента:
Если мы теперь кликнем мышкой по любому из блоков, то сработает этот обработчик и в консоли отобразится «DIV». Почему так происходит? Дело в том, что события в браузерной среде, срабатывая на любом дочернем элементе, переходят к его родителю, и там тоже возникает такое же событие. И так далее до самого корневого объекта.
Это называется всплытием события. И мы можем в этом убедиться, назначив обработчик каждому тегу:
Теперь, при обновлении документа, мы видим три тега в порядке возникновения события на каждом из них. Причем, это событие дойдет до самого корня DOM-дерева – до объекта document.
Так всплывают почти все события в JavaScript. Но есть исключения. Например, событие focus не всплывает. Но пока не заостряйте на этом свое внимание, просто имейте в виду, что всплытие – это не абсолютное правило, есть исключения. Если на каком-то уровне обработки нам необходимо узнать: от какого элемента пришло событие, то можно воспользоваться свойством
Например, перепишем обработчик с выводом этой информации в консоль:
Видите отличие между свойствами currentTarget и target: первое указывает на текущий элемент, в котором обрабатывается событие, а второе – на элемент, в котором изначально произошло событие.
Иногда возникает необходимость прервать процесс всплытия и остановить обработку событий. Это реализуется с помощью метода:
Добавим его в наш обработчик и убедимся, что событие теперь останавливается на том элементе, где и возникло.
Однако, если у элемента имеется несколько обработчиков, срабатывающих на одно и то же событие (как мы говорили на предыдущем занятии, они добавляются с помощью метода document.addEventListener(…)), то для остановки их всех следует использовать метод:
Так как с помощью stopPropagation останавливается только текущий обработчик, в котором он и был вызван.
Небольшая рекомендация начинающим программистам: не вызывайте без строгой необходимости методы остановки процесса всплытия события, так как ряд элементов имеют автоматические обработчики стандартных событий. Например, при клике по ссылке осуществляется переход по указанному адресу. Если событие не дойдет, то и перехода не будет. Так что, прерывая этот процесс, вы должны четко понимать, что делаете!
На самом деле, события, прежде чем всплыть, сначала погружаются. Вот картинка, взятая из спецификации языка JavaScript, которая представляет жизненный цикл события.
Смотрите, в первой фазе (красная линия) событие опускается до целевого элемента, по которому кликнули мышью (это ячейка таблицы – тег td). Достигнув элемента, событие переходит во вторую фазу. После этого начинается третья фаза – фаза всплытия (зеленая линия), то есть переход по родительским элементам.
Так вот, в JavaScript можно отслеживать события не только на стадии всплытия, но и на стадии погружения. Для этого обработчики следует добавлять с помощью метода addEventListener, у которого третий параметр устанавливается в значение true:
или просто писать true:
Перепишем наш скрипт в таком виде:
Теперь, при клике по элементу span, мы увидим как событие идет вниз от блока div и обратно от span к div. То есть, если в методе addEventListener третий аргумент равен true, то обработчик перехватывает событие в стадии погружения. Если же этот аргумент равен false – то на стадии всплытия. Кроме того, свойство eventPhase показывает нам номер фазы: 1 – погружение; 2 – достижение целевого элемента; 3 – всплытие. Причем, на целевом элементе span срабатывают два обработчика: и на погружение и на всплытие.
Если мы теперь захотим удалить какой-либо обработчик с помощью метода removeEventListener, то должны также указывать и фазу, для которой этот обработчик применен. Например, если записать вот так:
то обработчик showTag удален не будет, т.к. здесь по умолчанию идет удаление на всплытие. В нашем случае следует прописать так:
Теперь, при клике по span мы не увидим div на стадии погружения – обработчик был успешно удален.
Вот так в браузерной среде происходит движение большинства событий.
Видео по теме
JavaScipt (DOM) #1: объектная модель документа DOM и BOM
JavaScipt (DOM) #3: методы поиска элементов в DOM: querySelector, querySelectorAll, getElementById
JavaScipt (DOM) #4: свойства DOM-узлов: nodeName, innerHTML, outerHTML, data, textContent, hidden
JavaScipt (DOM) #5: работа с нестандартными свойствами DOM-элементов: getAttribute, setAttribute, dataset
JavaScipt (DOM) #6: создание и добавление элементов DOM createElement, append, remove, insertAdjacentHTML
JavaScipt (DOM) #9: HTML-документ: размеры (clientWidth, innerWidth), положение (pageYOffset, scrollBy)
JavaScipt (DOM) #11: обработчики событий: onclick, addEventListener, removeEventListener, event
JavaScipt (DOM) #12: погружение и всплытие событий: stopPropagation, stopImmediatePropagation, eventPhase
JavaScipt (DOM) #14: события мыши mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter
JavaScipt (DOM) #15: события клавиатуры keydown, keyup, событие скроллинга scroll
JavaScipt (DOM) #18: события change, input, cut, copy, paste, submit элементов input и select
JavaScipt (DOM) #20: события load, error; атрибуты async, defer тега script
JavaScipt (DOM) #21: пример предзагрузки изображений с помощью javascript
JavaScipt (DOM) #22: пример создания начала игры арканоид
© 2021 Частичное или полное копирование информации с данного сайта для распространения на других ресурсах, в том числе и бумажных, строго запрещено. Все тексты и изображения являются собственностью сайта
В этой статье рассмотрим:
Распространение события
Когда некоторый объект инициирует событие, то оно не просто возникает на нём, а распространяется в документе определённым образом.
Это распространение является двунаправленным: от window к целевому элементу и обратно.
Согласно стандарту, оно делится на 3 фазы:
Самое главное для нас, когда событие путешествует по документу, то браузер вызывает обработчики элементов, через которые оно проходит.
Фаза погружения события
Этот аргумент задаёт фазу, на которой нужно отлавливать событие.
Пример, в котором обработаем событие click на фазе погружения:
В реальном коде обработка событий на этапе погружения используется довольно редко, но такая возможность в JavaScript имеется и в некоторых сценариях она может быть полезной.
Фаза цели
На этой фазе будут вызваны все обработчики, прикреплённые к целевому объекту, независимо от того каким способом они назначены.
Добавление обработчика посредством HTML-атрибута onclick :
Добавление обработчика посредством свойства onclick :
Добавление обработчика через addEventListener :
Фаза всплытия
На фазы всплытия будут вызываться обработчики, которые мы зарегистрировали через HTML-атрибут on
Пример, в котором обработаем событие click на фазе всплытия:
Пример, показывающий весь цикл путешествия события
Рассмотрим следующий пример:
Т.е. при клике по #level3 :
Чтобы программно посмотреть, как это происходит добавим обработчики ко всем участвующих в этом процессе элементам, а также к объектам document и window :
Обработчики на цели срабатывают как те, которые установлены на погружение, так и на всплытие. Поэтому у нас это сообщение «#level-3» вывелось 2 раза.
Делегирование событий
Делегирование событий – это механизм реагирования на событие через одного общего для этих элементов родителя.
Делегирование позволяет не добавлять обработчик к каждому элементу, а сделать этого только для одного общего для всех них элемента.
Допустим, есть список:
Предположим, что при нажатии на каждый элемент списка должно что-то произойти. Например, выводиться сообщение.
В этом случае лучшим решением, конечно, будет добавить обработчик к родительскому элементу. Но если вы добавите обработчик к
- , то как вы узнаете, какой элемент был нажат?
Прерывания всплытия или погружения события
Всплытие или погружение события можно прервать. Осуществляется это посредством вызова метода объекта события stopPropagation в обработчике.
Бесспорно, всплытие — это очень удобно и архитектурно прозрачно. Не прекращайте его без явной нужды.
Например, прервём всплытие события click на элементе body :
Задачи
Вывести в контент кнопки количество кликов по ней
Добавьте на страницу JavaScript код, который будет при нажатии на кнопку выводить количество кликов по ней. При этом кнопки на страницу добавляются динамически.
Исходный код динамически добавляющий кнопки на страницу:
При нажатию на кнопку перейти в начало страницы
Необходимо написать код, который будет при нажатии на любую из этих кнопок прокручивать страницу к её началу.
Руководство по Event Propagation в JavaScript
Распространение событий (Event Propagation) — это механизм, который определяет, как события распространяются или проходят через DOM-дерево, чтобы достичь своей цели, и что происходит с ней после.
Давайте разберемся с этим на примере. Предположим, вы назначили обработчик события click для гиперссылки (элемент ), которая вложена в абзац (элемент
). Теперь, если вы нажмете на эту ссылку, обработчик будет выполнен.
Но, если вы назначите обработчик события click для абзаца, содержащего ссылку, то даже в этом случае нажатие на ссылку все равно вызовет обработчик. Это происходит потому, что события не просто влияют на целевой элемент, они перемещаются по DOM-дереву, чтобы достичь своей цели. Дословный перевод этого явления — распространение событий (Event Propagation).
В современном браузере распространение событий происходит в две фазы: захват (capturing) и фаза «пузырьков» (bubbling). Прежде чем мы продолжим, взгляните на следующую иллюстрацию:
Изображение выше демонстрирует, как событие распространяется в дереве DOM на разных этапах, когда оно запускается для элемента, который имеет родительские элементы.
Концепция распространения событий была введена для того, чтобы справляться с ситуациями, когда несколько элементов в иерархии DOM с отношениями родитель-потомок имеют обработчики событий для одного и того же события, например, щелчок мыши. Теперь вопрос заключается в том, какое событие click элемента будет обрабатываться первым, когда пользователь нажимает на внутренний элемент — событие click внешнего элемента или внутреннего элемента. Рассмотрим этот вопрос подробнее.
Формально есть 3 фазы: захват (capture), цель (target) и пузырьковая фаза (bubble phase). Но 2-я фаза не обрабатывается отдельно в современных браузерах, обработчики, зарегистрированные как для фаз захвата, так и для пузырьковых операций, выполняются на этой фазе.
Фаза захвата (capture)
Также, если какой-либо предок целевого элемента и сама цель имеют специально зарегистрированный получатель событий захвата (capturing event listener) для этого типа события, слушатели (event listener) выполняются на этом этапе. Давайте посмотрим на следующий пример:
Захват событий поддерживается не во всех браузерах и используется редко. Например, Internet Explorer до версии 9.0 не поддерживает захват событий.
Фаза «пузырей» (bubbling)
В фазе bubbling происходит полная противоположность. В этой фазе событие распространяется или всплывает вверх по дереву DOM, от целевого элемента до последнего из предков целевого элемента. Например, если пользователь щелкает гиперссылку, это событие щелчка будет проходить через элемент
Кроме того, если какой-либо предок целевого элемента и сама цель имеют обработчики событий, назначенные для этого типа события, эти обработчики выполняются на этом этапе. В современных браузерах все обработчики событий по умолчанию регистрируются в фазе пузырьков. Давайте посмотрим на пример:
События bubbling поддерживаются во всех браузерах и работают для всех обработчиков, независимо от того, как они зарегистрированы, например. используя onclick или addEventListener() (если только они не зарегистрированы в качестве прослушивателя событий захвата). Вот почему термин «распространение событий» (capturing event listener) часто используется как синоним всплытия событий (bubbling).
Доступ к целевому элементу (target)
Целевым элементом является узел DOM, который сгенерировал событие. Например, если пользователь щелкает гиперссылку, целевым элементом является гиперссылка.
Целевой элемент доступен как event.target ; доступ не изменяется на всех этапах распространения события. Кроме того, ключевое слово this представляет текущий элемент (то есть элемент, к которому прикреплен работающий в данный момент обработчик). Давайте посмотрим на пример:
У знака стрелки ( => ), который мы использовали в приведенном выше примере, более короткий синтаксис, чем у выражения функции и это заставит ключевое слово this вести себя правильно. Пожалуйста, ознакомьтесь с Руководством по функциям ES6 в JavaScript, чтобы узнать больше об этой функции.
Остановка распространения события
Вы также можете остановить распространение событий на середине, если хотите предотвратить уведомление обработчиков событий любого элемента-предка о событии.
В следующем примере мы прикрепили несколько прослушивателей к гиперссылке, но выполняться будет только один прослушиватель при нажатии на ссылку и вы увидите только одно предупреждение.
Предотвращение действия по умолчанию
С некоторыми событиями связано действие по умолчанию. Например, если вы щелкнете по ссылке, браузер переместит вас к цели ссылки, когда вы нажмете на кнопку отправки формы, браузер отправит форму и т. д. Такие действия по умолчанию можно предотвратить с помощью метода preventDefault() объекта события.
Однако предотвращение действий по умолчанию не останавливает распространение событий; событие продолжает распространяться на DOM-дерево как обычно. Вот пример:
Похожие посты
Руководство по сортировке массивов в JavaScript
Руководство по массивам в JavaScript
Руководство по работе с атрибутами DOM в JavaScript
Насколько публикация полезна?
Нажмите на звезду, чтобы оценить!
Средняя оценка 5 / 5. Количество оценок: 1
Оценок пока нет. Поставьте оценку первым.
Разработка сайтов для бизнеса
Если у вас есть вопрос, на который вы не знаете ответ — напишите нам, мы поможем разобраться. Мы всегда рады интересным знакомствам и новым проектам.
70 вопросов по JavaScript для подготовки к собеседованию
Доброго времени суток, друзья!
Надеюсь, эта статья будет полезна как начинающим разработчикам, так и опытным.
В вопросах, которые показались мне сложнее прочих, приведены ссылки на дополнительную литературу.
Буду признателен за развернутые комментарии. Все замечания будут учтены при редактировании статьи.
70 вопросов по JavaScript для подготовки к собеседованию
1. В чем разница между null и undefined?
Для начала давайте поговорим о том, что у них общего.
Во-первых, они принадлежат к 7 «примитивам» (примитивным типам) JS:
Во-вторых, они являются ложными значениями, т.е. результатом их преобразования в логическое значение с помощью Boolean() или оператора «!!» является false:
Ладно, теперь о различиях.
null — это «значение отсутствия значения». null — это значение, которое присваивается переменной явно. В примере ниже мы получаем null, когда метод fs.readFile отрабатывает без ошибок:
При сравнении null и undefined мы получаем true, когда используем оператор «==», и false при использовании оператора «===». О том, почему так происходит, см. ниже.
2. Для чего используется оператор «&&»?
Оператор «&&» (логическое и) находит и возвращает первое ложное значение либо последний операнд, когда все значения истинные. Он использует короткое замыкание во избежание лишних затрат:
То же самое с оператором «&&»:
3. Для чего используется оператор «||»?
Оператор «||» (логическое или) находит и возвращает первое истинное значение. Он также использует короткое замыкание. Данный оператор использовался для присвоения параметров по умолчанию в функциях до того, как параметры по умолчанию были стандартизированы в ES6.
4. Является ли использование унарного плюса (оператор «+») самым быстрым способом преобразования строки в число?
Согласно MDN оператор «+» действительно является самым быстрым способом преобразования строки в число, поскольку он не выполняет никаких операций со значением, которое является числом.
5. Что такое DOM?
DOM или Document Object Model (объектная модель документа) — это прикладной программный интерфейс (API) для работы с HTML и XML документами. Когда браузер первый раз читает («парсит») HTML документ, он формирует большой объект, действительно большой объект, основанный на документе — DOM. DOM представляет собой древовидную структуру (дерево документа). DOM используется для взаимодействия и изменения самой структуры DOM или его отдельных элементов и узлов.
Допустим, у нас есть такой HTML:
DOM этого HTML выглядит так:
В JS DOM представлен объектом Document. Объект Document имеет большое количество методов для работы с элементами, их созданием, модификацией, удалением и т.д.
6. Что такое распространение события (Event Propagation)?
Подробнее о распространении событий можно почитать здесь и здесь.
7. Что такое всплытие события?
Когда событие происходит в элементе DOM, оно затрагивает не только этот элемент. Событие «всплывает» (подобно пузырьку воздуха в воде), переходит от элемента, вызвавшего событие (event.target), к его родителю, затем поднимается еще выше, к родителю родителя элемента, пока не достигает объекта Window.
Допустим, у нас есть такая разметка:
У метода addEventListener есть третий необязательный параметр — useCapture. Когда его значение равняется false (по умолчанию), событие начинается с фазы всплытия. Когда его значение равняется true, событие начинается с фазы погружения (для «прослушивателей» событий, прикрепленных к цели события, событие находится в целевой фазе, а не в фазах погружения или всплытия. События в целевой фазе инициируют все прослушиватели на элементе в том порядке, в котором они были зарегистрированы независимо от параметра useCapture — прим. пер.). Если мы кликнем по элементу child, в консоль будет выведено: child, parent, grandparent, html, document, window. Вот что такое всплытие события.
8. Что такое погружение события?
Когда событие происходит в элементе DOM, оно происходит не только в нем. В фазе погружения событие опускается от объекта Window до цели события через всех его предков.
У метода addEventListener есть третий необязательный параметр — useCapture. Когда его значение равняется false (по умолчанию), событие начинается с фазы всплытия. Когда его значение равняется true, событие начинается с фазы погружения. Если мы кликнем по элементу child, то увидим в консоли следующее: window, document, html, grandparent, parent, child. Это и есть погружение события.
9. В чем разница между методами event.preventDefault() и event.stopPropagation()?
Метод event.preventDefault() отключает поведение элемента по умолчанию. Если использовать этот метод в элементе form, то он предотвратит отправку формы (submit). Если использовать его в contextmenu, то контекстное меню будет отключено (данный метод часто используется в keydown для переопределения клавиатуры, например, при создании музыкального/видео плеера или текстового редактора — прим. пер.). Метод event.stopPropagation() отключает распространение события (его всплытие или погружение).
10. Как узнать об использовании метода event.preventDefault()?
Для этого мы можем использовать свойство event.defaulPrevented, возвращающее логическое значение, служащее индикатором применения к элементу метода event.preventDefault.
11. Почему obj.someprop.x приводит к ошибке?
Ответ очевиден: мы пытается получить доступ к свойству x свойства someprop, которое имеет значение undefined. obj.__proto__.__proto = null, поэтому возвращается undefined, а у undefined нет свойства x.
12. Что такое цель события или целевой элемент (event.target)?
Простыми словами, event.target — это элемент, в котором происходит событие, или элемент, вызвавший событие.
Имеем такую разметку:
И такой простенький JS:
Мы прикрепили «слушатель» к внешнему div. Однако если мы нажмем на кнопку, то получим в консоли разметку этой кнопки. Это позволяет сделать вывод, что элементом, вызвавшим событие, является именно кнопка, а не внешний или внутренние div.
13. Что такое текущая цель события (event.currentTarget)?
Event.currentTarget — это элемент, к которому прикреплен прослушиватель событий.
И немного видоизмененный JS:
Мы прикрепили слушатель к внешнему div. Куда бы мы ни кликнули, будь то кнопка или один из внутренних div, в консоли мы всегда получим разметку внешнего div. Это позволяет заключить, что event.currentTarget — это элемент, к которому прикреплен прослушиватель событий.
14. В чем разница между операторами «==» и «===»?
Разница между оператором «==» (абстрактное или нестрогое равенство) и оператором «===» (строгое равенство) состоит в том, что первый сравнивает значения после их преобразования или приведения к одному типу (Coersion), а второй — без такого преобразования.
Давайте копнем глубже. И сначала поговорим о преобразовании.
Преобразование представляет собой процесс приведения значения к другому типу или, точнее, процесс приведения сравниваемых значений к одному типу. При сравнении оператор «==» производит так называемое неявное сравнение. Оператор «==» выполняет некоторые операции перед сравнением двух значений.
Допустим, мы сравниваем x и y.
Все примеры возвращают true.
Первый пример — первое условие алгоритма.
Второй пример — четвертое условие.
Третий — второе.
Четвертый — седьмое.
Пятый — восьмое.
И последний — десятое.
Если же мы используем оператор «===» все примеры, кроме первого, вернут false, поскольку значения в этих примерах имеют разные типы.
15. Почему результатом сравнения двух похожих объектов является false?
В JS объекты и примитивы сравниваются по-разному. Примитивы сравниваются по значению. Объекты — по ссылке или адресу в памяти, где хранится переменная. Вот почему первый console.log возвращает false, а второй — true. Переменные «a» и «c» ссылаются на один объект, а переменные «a» и «b» — на разные объекты с одинаковыми свойствами и значениями.
16. Для чего используется оператор «!!»?
Оператор «!!» (двойное отрицание) приводит значение справа от него к логическому значению.
17. Как записать несколько выражений в одну строку?
Для этого мы можем использовать оператор «,» (запятая). Этот оператор «двигается» слева направо и возвращает значение последнего выражения или операнда.
Если мы выведем значение x в консоль, то получим 27. Сначала мы увеличиваем значение x на единицу (x = 6). Затем вызываем функцию addFive() с параметром 6, к которому прибавляем 5 (x = 11). После этого мы умножаем значение x на 2 (x = 22). Затем вычитаем 5 (x = 17). И, наконец, прибавляем 10 (x = 27).
18. Что такое поднятие (Hoisting)?
Поднятие — это термин, описывающий подъем переменной или функции в глобальную или функциональную области видимости.
Для того, чтобы понять, что такое Hoisting, необходимо разобраться с тем, что представляет собой контекст выполнения.
Контекст выполнения — это среда, в которой выполняется код. Контекст выполнения имеет две фазы — компиляция и собственно выполнение.
Компиляция. В этой фазе функциональные выражения и переменные, объявленные с помощью ключевого слова «var», со значением undefined поднимаются в самый верх глобальной (или функциональной) области видимости (как бы перемещаются в начало нашего кода. Это объясняет, почему мы можем вызывать функции до их объявления — прим. пер.).
Выполнение. В этой фазе переменным присваиваются значения, а функции (или методы объектов) вызываются или выполняются.
Запомните: поднимаются только функциональные выражения и переменные, объявленные с помощью ключевого слова «var». Обычные функции и стрелочные функции, а также переменные, объявленные с помощью ключевых слов «let» и «const» не поднимаются.
Предположим, что у нас есть такой код:
Получаем undefined, 1 и ‘Hello Mark!’.
Вот как выглядит фаза компиляции:
После завершения фазы компиляции начинается фаза выполнения, когда переменным присваиваются значения и вызываются функции.
Дополнительно о Hoisting можно почитать здесь.
19. Что такое область видимости (Scope)?
Область видимости — это место, где (или откуда) мы имеем доступ к переменным или функциям. JS имеем три типа областей видимости: глобальная, функциональная и блочная (ES6).
Глобальная область видимости — переменные и функции, объявленные в глобальном пространстве имен, имеют глобальную область видимости и доступны из любого места в коде.
Функциональная область видимости (область видимости функции) — переменные, функции и параметры, объявленные внутри функции, доступны только внутри этой функции.
Блочная область видимости — переменные (объявленные с помощью ключевых слов «let» и «const») внутри блока (< >), доступны только внутри него.
Область видимости — это также набор правил, по которым осуществляется поиск переменной. Если переменной не существует в текущей области видимости, ее поиск производится выше, во внешней по отношению к текущей области видимости. Если и во внешней области видимости переменная отсутствует, ее поиск продолжается вплоть до глобальной области видимости. Если в глобальной области видимости переменная обнаружена, поиск прекращается, если нет — выбрасывается исключение. Поиск осуществляется по ближайшим к текущей областям видимости и останавливается с нахождением переменной. Это называется цепочкой областей видимости (Scope Chain).
20. Что такое замыкание (Closures)?
Наверное, это самый сложный вопрос из списка. Я постараюсь объяснить, как я понимаю замыкание.
По сути, замыкание — это способность функции во время создания запоминать ссылки на переменные и параметры, находящиеся в текущей области видимости, в области видимости родительской функции, в области видимости родителя родительской функции и так до глобальной области видимости с помощью цепочки областей видимости. Обычно область видимости определяется при создании функции.
Примеры — отличный способ объяснить замыкание:
В данном примере, когда мы объявляем функцию, глобальная область видимости является частью замыкания.
Переменная «globalVar» не имеет значения на картинке, потому что ее значение может меняться в зависимости от того, где и когда будет вызвана функция. Но в примере выше globalVar будет иметь значение «abc».
Теперь пример посложнее:
В результате получаем «guess outer inner». Объяснение следующее: когда мы вызываем функцию outerFunc и присваиваем переменной «x» значение, возвращаемое функцией innerFunc, параметр «outerParam» равняется «outer». Несмотря на то, что мы присвоили переменной «outerVar» значение «outer-2», это произошло после вызова функции outerFunc, которая «успела» найти значение переменной «outerVar» в цепочке областей видимости, этим значением было «outer». Когда мы вызываем «x», которая ссылается на innerFunc, значением «innerParam» является «inner», потому что мы передаем это значение в качестве параметра при вызове «x». globalVar имеет значение «guess», потому что мы присвоили ей это значение перед вызовом «x».
Пример неправильного понимания замыкания.
Данный код работает не так, как ожидается. Объявление переменной с помощью ключевого слова «var» делает эту переменную глобальной. После добавления функций в массив «arrFunc» значением глобальной переменной «i» становится «5». Поэтому когда мы вызываем функцию, она возвращает значение глобальной переменной «i». Замыкание хранит ссылку на переменную, а не на ее значение во время создания. Эту проблему можно решить, используя IIFE или объявив переменную с помощью ключевого слова «let».
Подробнее о замыкании можно почитать здесь и здесь.
21. Какие значения в JS являются ложными?
Ложными являются значения, результатом преобразования которых в логическое значение является false.
22. Как проверить, является ли значение ложным?
Следует использовать функцию Boolean или оператор «!!» (двойное отрицание).
23. Для чего используется директива «use strict»?
«use strict» — это директива ES5, которая заставляет весь наш код или код отдельной функции выполняться в строгом режиме. Строгий режим вводит некоторые ограничения по написанию кода, тем самым позволяя избегать ошибок на ранних этапах.
Вот какие ограничения накладывает строгий режим.
Нельзя присваивать значения или обращаться к необъявленным переменным:
Запрещено присваивать значения глобальный переменным, доступным только для чтения или записи:
Нельзя удалить «неудаляемое» свойство объекта:
Запрещено дублирование параметров:
Нельзя создавать функции с помощью функции eval:
Значением «this» по умолчанию является undefined:
24. Какое значение имеет this?
Обычно this ссылается на значение объекта, который в данный момент выполняет или вызывает функцию. «В данный момент» означает, что значение this меняется в зависимости от контекста выполнения, от того места, где мы используем this.
В данном случае метод getName возвращает this.name, а this ссылается на carDetails, объект, в котором выполняется getName, который является ее «владельцем».
Добавим после console.log три строчки:
Второй console.log выдает Ford Ranger, и это странно. Причина такого поведения заключается в том, что «владельцем» getCarName является объект window. Переменные, объявленные с помощью ключевого слова «var» в глобальной области видимости, записываются в свойства объекта window. this в глобальной области видимости ссылается на объект window (если речь не идет о строгом режиме).
В этом примере this и window ссылаются на один объект.
Одним из способов решения данной проблемы является использование методов call или apply:
Call и apply принимают в качестве первого аргумента объект, который будет являться значением this внутри функции.
В IIFE, функциях, которые создаются в глобальном области видимости, анонимных функциях и внутренних функциях методов объекта значением this по умолчанию является объект window.
Существует два способа получить «Marko Polo».
Во-первых, мы можем сохранить значение this в переменной:
Во-вторых, мы можем использовать стрелочную функцию:
Стрелочные функции не имеют собственного значения this. Они копируют значение this из внешнего лексического окружения.
25. Что такое прототип объекта?
В двух словах, прототип — это план (схема или проект) объекта. Он используется как запасной вариант для свойств и методов, существующих в данном объекте. Это также один из способов обмена свойствами и функциональностью между объектами. Это основная концепция прототипного наследования в JS.
Несмотря на то, что объект «о» не имеет свойства toString, обращение к этому свойству не вызывает ошибки. Если определенного свойства нет в объекте, его поиск осуществляется сначала в прототипе объекта, затем в прототипе прототипа объекта и так до тех пор, пока свойство не будет найдено. Это называется цепочкой прототипов. На вершине цепочки прототипов находится Object.prototype.
Подробнее о прототипах и наследовании можно почитать здесь и здесь.
26. Что такое IIFE?
IIFE или Immediately Invoked Function Expression — это функция, которая вызывается или выполняется сразу же после создания или объявления. Для создания IIFE необходимо обернуть функцию в круглые скобки (оператор группировки), превратив ее в выражение, и затем вызвать ее с помощью еще одних круглых скобок. Это выглядит так: (function()<>)().
Все эти примеры являются валидными. Предпоследний пример показывает, что мы можем передавать параметры в IIFE. Последний пример показывает, что мы можем сохранить результат IIFE в переменной.
Лучшее использование IIFE — это выполнение функций настройки инициализации и предотвращение конфликтов имен с другими переменными в глобальной области видимости (загрязнение глобального пространства имен). Приведем пример.
У нас есть ссылка на библиотеку somelibrary.js, которая предоставляет некоторые глобальные функции, которые мы можем использовать в нашем коде, но в этой библиотеке есть два метода, createGraph и drawGraph, которые мы не используем, потому что они содержат ошибки. И мы хотим реализовать эти функции самостоятельно.
Одним из способов решить данную проблему является изменение структуры наших скриптов:
Таким образом, мы переопределяем методы, предоставляемые библиотекой.
Вторым способом является изменение имен наших функций:
Третий способ — использование IIFE:
В этом примере мы создаем служебную переменную, которая содержит результат IIFE, возвращающий объект, содержащий методы createGraph и drawGraph.
Вот еще одна проблема, которую можно решить с помощью IIFE:
Допустим, у нас есть элемент «ul» с классом «list-group», содержащий 5 дочерних элементов «li». И мы хотим выводить в консоль значение «i» при клике по отдельному «li». Однако вместо этого в консоль всегда выводится 5. Виной всему замыкание.
Одним из решений является IIFE:
Причина, по которой этот код работает, как задумано, состоит в том, что IIFE создает новую область видимости на каждой итерации, и мы записываем значение «i» в currentIndex.
27. Для чего используется метод Function.prototype.apply?
Apply используется для привязки определенного объекта к значению this вызываемой функции.
Этот метод похож на Function.prototype.call. Единственное отличие состоит в том, что в apply аргументы передаются в виде массива.
28. Для чего используется метод Function.prototype.call?
Call используется для привязки определенного объекта к значению this вызываемой функции.
Этот метод похож на Function.prototype.apply. Отличие состоит в том, что в call аргументы передаются через запятую.
29. В чем разница между методами call и apply?
Отличие между call и apply состоит в том, как мы передаем аргументы в вызываемой функции. В apply аргументы передаются в виде массива, в call — через запятую.
30. Для чего используется метод Function.prototype.bind?
Bind возвращает новую функцию, значением this которой является объект, указанный в качестве первого параметра. В отличие от bind, call и apply сразу же вызывают функцию.
31. Что такое функциональное программирование и какие особенности JS позволяют говорить о нем как о функциональном языке программирования?
Функциональное программирование — это декларативная концепция программирования или образец (паттерн) того, как строятся приложения, как используются функции, содержащие выражения, которые вычисляют значения без изменения аргументов, которые им передаются.
Объект Array содержит методы map, filter и reduce, которые являются самыми известными функциями в мире функционального программирования из-за их полезности, а также потому, что они не изменяют массив, что делает эти функции «чистыми». Также в JS имеются замыкание и функции высшего порядка, которые являются характеристиками функционального языка программирования.
Метод map возвращает новый массив с результатами вызова callback для каждого элемента массива:
Метод filter создает новый массив со всеми элементами, которые удовлетворяют условию, указанному в callback:
Метод reduce выполняет callback один раз для каждого элемента массива, за исключением пустот, принимая четыре аргумента: начальное значение (или значение от предыдущего callback), значение текущего элемента, текущий индекс и итерируемый массив:
32. Что такое функции высшего порядка (Higher Order Functions)?
Функция высшего порядка — это функция, возвращающая другую функцию или принимающая другую функцию в качестве аргумента.
33. Почему функции в JS называют объектами первого класса (First-class Objects)?
Функции называют объектами первого класса, потому что они обрабатываются также, как и любое другое значение в JS. Они могут присваиваться переменным, быть свойством объекта (методом), элементом массива, аргументом другой функции, значением, возвращаемым функцией. Единственным отличием функции от любого другого значения в JS является то, что функция может быть выполнена или вызвана.
34. Как бы Вы реализовали метод Array.prototype.map?
Метод map создает новый массив с результатом вызова указанной функции для каждого элемента массива.
35. Как бы Вы реализовали метод Array.prototype.filter?
Метод filter создает новый массив со всеми элементами, прошедшими проверку, задаваемую в передаваемой функции.
36. Как бы Вы реализовали метод Array.prototype.reduce?
Метод reduce применяет функцию reducer к каждому элементу массива (слева-направо), возвращая одно результирующее значение.
37. Что такое объект arguments?
Arguments — это коллекция аргументов, передаваемых функции. Это объект, подобный массиву, у него есть свойство length, мы можем получить доступ к определенному значению с помощью arguments[i], но у него отсутствуют методы forEach, reduce, filter и map. Он позволяет узнать количество параметров функции.
Преобразовать arguments в массив можно с помощью Array.prototype.slice:
Запомните: в стрелочных функциях объект arguments не работает.
Вызов функции four приводит к ошибке ReferenceError: arguments is not defined. Эту проблему можно решить с помощью оператора rest:
Это автоматически поместит все параметры в массив.
38. Как создать объект, не имеющий прототипа?
Это можно сделать с помощью Object.create:
39. Почему в представленном коде переменная b становится глобальной при вызове функции?
Так происходит, потому что оператор присваивания («=») имеет правостороннюю ассоциативность, т.е. присваивает значения справа налево. Поэтому код принимает следующий вид:
Сначала значение 0 присваивается переменной «b», которая не объявлена. Движок JS делает ее глобальной. Возвращаемое выражением b = 0 значение (0) затем присваивается локальной переменной «a».
Эту проблему можно решить сначала объявив локальные переменные, а затем присвоив им значения:
40. Что такое ECMAScript?
ECMAScript — это спецификация, стандарт скриптовых языков программирования, он является основой JS, поэтому любые изменения ECMAScript отражаются на JS.
Последний вариант спецификации ECMA-262 можно посмотреть здесь.
41. Что нового привнес в JS стандарт ES6 или ECMAScript2015?
42. В чем разница между ключевыми словами «var», «let» и «const»?
Переменные, объявленные с помощью ключевого слова «var», являются глобальными. Это означает, что они доступны из любого места в коде:
Результатом первого console.log будет undefined, второго — 5. Мы имеем доступ к переменной «x» из-за ее всплытия в глобальную область видимости. Код из примера выше интерпретируется следующим образом:
Результатом первого console.log является undefined, поскольку объявленные переменные, которым не присвоено значения, имеют значение undefined по умолчанию.
Переменные, объявленные с помощью ключевых слов «let» и «const» имеют блочную область видимости. Это означает, что они доступны только внутри блока (< >):
Вызов этих функций с параметром false приведет к ошибке ReferenceError, потому что к переменным «x» и «y» нет доступа снаружи блока и их значения не возвращаются (не всплывают).
Разница между «let» и «const» состоит в том, что в первом случае мы может менять значение переменной, а во втором — нет (константа). При этом, мы можем менять значение свойства объекта, объявленного с помощью const, но не само свойство (переменную).
43. Что такое стрелочные функции (Arrow Functions)?
Стрелочная функция — это относительно новый способ создания функций в JS. Стрелочные функции создаются быстрее и имеют более читаемый синтаксис, чем функциональные выражения. В стрелочных функциях опускается слово «function»:
В функциональном выражении мы используем ключевое слово «return» для возврата значения. В стрелочной функции мы этого не делаем, поскольку стрелочные функции неявно возвращают значения при условии, что мы возвращаем одно выражение или значение:
Мы также можем передавать параметры стрелочным функциям. Если мы передаем один параметр, его можно не оборачивать в круглые скобки:
У стрелочных функций нет доступа к объекту arguments. Поэтому вызов первой функции приведет к ошибке. Для получения параметров, переданных функции, мы можем использовать оператор rest.
44. Что такое классы (Classes)?
Классы — это относительно новый способ написания функций-конструкторов в JS. Это синтаксический сахар для функций-конструкторов. В основе классов лежат те же прототипы и прототипное наследование:
Переопределение методов и наследование от другого класса:
Как узнать об использовании прототипов?
45. Что такое шаблонные литералы (Template Literals)?
Шаблонные литералы — относительно новый способ создания строк в JS. Шаблонные литералы создаются с помощью двойных обратных кавычек («):
В шаблонных литералах нам не нужно экранировать одинарные кавычки.
В ES6 нам не нужно использовать управляющую последовательность «\n» для перевода строки.
46. Что такое деструктуризация объекта (Object Destructuring)?
Деструктуризация — относительно новый способ получения (извлечения) значений объекта или массива.
Допустим, у нас есть такой объект:
Раньше для получения свойств объекта мы создавали переменные для каждого свойства. Это было очень скучно и сильно раздражало:
Использование деструктуризации позволяет сделать код чище и отнимает меньше времени. Синтаксис деструктуризации следующий: заключаем свойства объекта, которые хотим получить, в фигурные скобки (< >), а если речь идет о массиве — в квадратные скобки ([ ]):
Для изменения имени переменной следует использовать «propertyName: newName»:
Для присвоения переменным значения по умолчанию следует использовать «propertyName = ‘defaultValue’»:
47. Что такое модули (Modules)?
Модули позволяют объединять (использовать) код из разных файлов и избавляют нас от необходимости держать весь код в одном большом файле. До появления модулей в JS существовало две популярные системы модулей для поддержки кода:
Экспорт функциональности в другой файл (именной экспорт):
Импорт функциональности в другой файл:
Экспорт по умолчанию:
Это базовое использование модулей. Я не стал вдаваться в подробности, поскольку мой пост и без того получается слишком большим.
48. Что такое объект Set?
Объект Set позволяет хранить уникальные значения, примитивы и ссылки на объекты. Еще раз: в Set можно добавлять только уникальные значения. Он проверяет хранящиеся в нем значения с помощью алгоритма SameZeroValue.
Экземпляр Set создается с помощью конструктора Set. Мы также можем передать ему некоторые значения при создании:
Мы можем добавлять значения в Set, используя метод add. Поскольку метод add является возвращаемым, мы может использовать цепочку вызовов:
Мы можем удалять значения из Set, используя метод delete:
Мы можем проверить наличие свойства в Set, используя метод has:
Для получения длины Set используется метод size:
Метод clear очищает Set:
Мы можем использовать Set для удаления повторяющихся значений в массиве:
49. Что такое функция обратного вызова (Callback Function)?
Функция обратного вызова — это функция, вызов которой отложен на будущее (происходит при некоторых условиях, например, при наступлении события).
В примере мы ждем события «клик» на элементе с идентификатором «btnAdd». По клику вызывается функция clickCallback. Функция обратного вызова добавляет некоторый функционал данным или событию. Методам reduce, filter и map в качестве второго аргумента передается функция обратного вызова. Хорошей аналогией callback является следующая ситуация: Вы звоните кому-то, он не отвечает, Вы оставляете ему сообщение и ждете, когда он перезвонит. Звонок или сообщение — это событие или данные, а callback — это ожидание (предвосхищение) встречного звонка.
50. Что такое промисы (Promises)?
Промисы — это один из приемов работы с асинхронным кодом в JS. Они возвращают результат асинхронной операции. Промисы были придуманы для решения проблемы так называемого «ада функций обратного вызова».
Проблемы при таком подходе начинаются, когда нам необходимо добавить еще одну асинхронную операцию в первую (внутрь первой), затем еще одну и т.д. В результате мы получаем беспорядочный и нечитаемый код:
А вот как это выглядит с промисами:
У промиса есть четыре состояния:
Мы можем создать вспомогательную функцию для преобразования асинхронной операции с callback в промис. Она будет работать наподобие util из Node.js («промисификация»):
Подробнее о промисах можно почитать здесь и здесь.
51. Что такое async/await?
Async/await — относительно новый способ написания асинхронного (неблокирующего) кода в JS. Им оборачивают промис. Он делает код более читаемым и чистым, чем промисы и функции обратного вызова. Однако для использования async/await необходимо хорошо знать промисы.
Запомните: использование ключевого слова «async» перед функцией заставляет ее возвращать промис:
Ключевое слово «await» можно использовать только внутри асинхронной функции. Использование «await» внутри другой функции приведет к ошибке. Await ожидает завершения выражения справа, чтобы вернуть его значение перед выполнением следующей строчки кода.
Подробнее об async/await можно почитать здесь и здесь.
52. В чем разница между spread-оператором и rest-оператором?
Операторы spread и rest имеют одинаковый синтаксис («. «). Разница состоит в том, что с помощью spread мы передаем или распространяем данные массива на другие данные, а с помощью rest — получаем все параметры функции и помещаем их в массив (или извлекаем часть параметров).
В этом примере мы используем spread при вызове функции add с данными массива nums. Значением переменной «a» будет 5, b = 6, sum = 11.
Здесь мы вызываем функцию add с любым количеством аргументов. Add возвращает сумму этих аргументов.
В этом примере мы используем rest для помещения любого количества параметров, кроме первого, в массив others.
53. Что такое параметры по умолчанию (Default Parameters)?
Это относительно новый способ определения значений переменных по умолчанию.
Можно использовать деструктуризацию:
Мы даже можем использовать по умолчанию параметры, объявленные в том же месте:
54. Что такое объектная обертка (Wrapper Objects)?
Примитивы строка, число и boolean имеют свойства и методы, несмотря на то, что они не являются объектами:
Name — это строка (примитивный тип), у которого нет свойств и методов, но когда мы вызываем метод toUpperCase(), это приводит не к ошибке, а к «MARKO».
Причина такого поведения заключается в том, что name временно преобразуется в объект. У каждого примитива, кроме null и undefined, есть объект-обертка. Такими объектами являются String, Number, Boolean, Symbol и BigInt. В нашем случае код принимает следующий вид:
Временный объект отбрасывается по завершении работы со свойством или методом.
55. В чем разница между явным и неявным преобразованием или приведением к типу (Implicit and Explicit Coercion)?
Неявное преобразование — это способ приведения значения к другому типу без нашего ведома (участия).
Предположим, у нас есть следующее:
Результатом первого console.log будет 16. В других языках это привело бы к ошибке, но в JS 1 конвертируется в строку и конкатенируется (присоединяется) c 6. Мы ничего не делали, преобразование произошло автоматически.
Результатом второго console.log будет 1. False было преобразовано в 0, true — в 1. 0 + 1 = 1.
Результатом третьего console.log будет 12. Строка 2 была преобразована в число перед умножением на 6.
Явное преобразование предполагает наше участие в приведении значения к другому типу:
В этом примере мы используем parseInt для приведения строки 6 к числу, затем складываем два числа и получаем 7.
56. Что такое NaN? Как проверить, является ли значение NaN?
NaN или Not A Number (не число) — это значение, получаемое в результате выполнения числовой операции над нечисловым значением:
В JS есть встроенный метод isNaN, позволяющий проверять, является ли значение NaN, но он ведет себя довольно странно:
Результатом всех console.log является true, несмотря на то, что ни одно из значений не является NaN.
ES6 для проверки, является ли значение NaN, рекомендует использовать метод Number.isNaN. Мы также можем написать вспомогательную функцию для решения проблемы «неравенства NaN самому себе»:
57. Как проверить, является ли значение массивом?
Для этого следует использовать метод Array.isArray:
Если среда, в которой Вы работаете, не поддерживает данный метод, можете использовать такой полифил:
58. Как проверить, что число является четным, без использования деления по модулю или деления с остатком (оператора «%»)?
Для решения данной задачи можно использовать оператор «&» (бинарное и). Оператор «&» сравнивает операнды как бинарные значения.
0 в бинарной системе счисления это 000
1 — это 001
2 — 010
3 — 011
4 — 100
5 — 101
6 — 110
7 — 111
и т.д.
Console.log(5 & 1) вернет 1. Сначала оператор «&» конвертирует оба числа в бинарные значения, 5 превращается в 101, 1 — в 001. Затем производится побитовое сравнение:
Сравниваем 1 и 0, получаем 0.
Сравниваем 0 и 0, получаем 0.
Сравниваем 1 и 1, получаем 1.
Преобразуем бинарное значение в целое число, получаем 1.
Если эта информация кажется Вам слишком сложной, мы можем решить поставленную задачу с помощью рекурсивной функции:
59. Как определить наличие свойства в объекте?
Существует три способа это сделать.
Первый способ состоит в использовании оператора «in»:
Второй — использовать метод hasOwnProperty:
Третий — индексная нотация массива:
60. Что такое AJAX?
AJAX или Asyncronous JavaScript and XML — это набор взаимосвязанных технологий, которые позволяют работать с данными в асинхронном режиме. Это означает, что мы можем отправлять данные на сервер и получать данные с него без перезагрузки веб-страницы.
AJAX использует следующие технологии:
HTML — структура веб-страницы.
CSS — стили веб-страницы.
JavaScript — поведение страницы и работа с DOM.
XMLHttpRequest API — отправка и получение данных с сервера.
PHP, Python, Nodejs — какой-нибудь серверный язык.
61. Как в JS создать объект?
62. В чем разница между методами Object.freeze и Object.seal?
Разница заключается в том, что при использовании метода Object.freeze мы не можем менять или редактировать свойства объекта, а при использовании Object.seal у нас такая возможность имеется.
63. В чем разница между оператором «in» и методом hasOwnProperty?
Отличие состоит в том, что оператор «in» проверяет наличие свойства не только в самом объекте, но и в его прототипах, а метод hasOwnProperty — только в объекте.
64. Какие приемы работы с асинхронным кодом в JS Вы знаете?
65. В чем разница между обычной функцией и функциональным выражением?
Допустим, у нас есть следующее:
Вызов notHoistedFunc приведет к ошибке, а вызов hoistedFunc нет, потому что hoistedFunc «всплывает», поднимается в глобальную область видимости, а notHoistedFunc нет.
66. Как в JS вызвать функцию?
В JS существует 4 способа вызвать функцию. Вызов определяет значение this или «владельца» функции.
Вызов в качестве функции. Если функция вызывается как метод, конструктор или с помощью методов apply или call, значит она вызывается как функция. Владельцем такой функции является объект window:
Вызов в качестве метода. Когда функция является свойством объекта, мы называем ее методом. Когда вызывается метод, значением this становится объект этого метода:
Вызов в качестве конструктора. Когда функция вызывается с использованием ключевого слова «new», мы называем такую функцию конструктором. При этом создается пустой объект, являющийся значением this:
Вызов с помощью методов apply или call. Мы используем эти методы, когда хотим явно определить значение this или владельца функции:
67. Что такое запоминание или мемоизация (Memoization)?
Мемоизация — это прием создания функции, способной запоминать ранее вычисленные результаты или значения. Преимущество мемоизации заключается в том, что мы избегаем повторного выполнения функции с одинаковыми аргументами. Недостатком является то, что мы вынуждены выделять дополнительную память для сохранения результатов.
68. Как бы Вы реализовали вспомогательную функцию запоминания?
Мы реализовали функцию мемоизации с одним аргументом. Сделаем ее «мультиаргументной»:
69. Почему typeof null возвращает object? Как проверить, является ли значение null?
typeof null == ‘object’ всегда будет возвращать true по историческим причинам. Поступало предложение исправить эту ошибку, изменив typeof null = ‘object’ на typeof null = ‘null’, но оно было отклонено в интересах сохранения обратной совместимости (такое изменение повлекло бы за собой большое количество ошибок).
Для проверки, является ли значение null можно использовать оператор строгого равенства (===):
70. Для чего используется ключевое слово «new»?
Ключевое слово «new» используется в функциях-конструкторах для создания нового объекта (нового экземпляра класса).