Базовые вопросы по JavaScript Flashcards
Объясните делегирование событий
Всплытие событий позволяет реализовать один из самых важных приёмов разработки - делегирование.
Он заключается в том, что если у нас есть много элементов, события на которых нужно обрабатывать похожим образом, то вместо того, чтобы назначать обработчик каждому - мы ставим один обработчик на их общего предка. Из него можно получить целевой элемент event.target, понять на каком потомке произошло событие и обработать его.
Алгоритм:
Вешаем обработчик на контейнер.
В обработчике: получаем event.target.
В обработчике: если event.target или один из его родителей в контейнере (this) – интересующий нас элемент – обрабатываем его.
Зачем использовать:
Упрощает инициализацию и экономит память: не нужно вешать много обработчиков.
Меньше кода: при добавлении и удалении элементов не нужно ставить или снимать обработчики.
Удобство изменений: можно массово добавлять или удалять элементы путём изменения innerHTML.
Объясните, как this работает в JavaScript
Использование this гарантирует, что функция работает именно с тем объектом, в контексте которого вызвана, если это не стрелочная функция. У стрелочных функций контекст this определяется в момент создания функции.
Значение this называется контекстом вызова и будет определено в момент вызова функции. Значением this является объект перед точкой, в контексте которого вызван метод.
Расскажите, как работает прототипное наследование
Прототипом объекта А называется объект B, свойства и методы которого доступны для объекта A как собственные.
У любого объекта есть прототип, на который указывает его свойство __proto__ и который также является объектом.
У любой функции есть ассоциированный с ней объект, на который в контексте функции указывает свойство prototype. В него как в контейнер обычно складывают свойства и методы для работы с определенным классом объектов.
Такой контейнер автоматически становится прототипом объектов, создаваемых функциями-конструкторами
Для редактирования прототипной ссылки объекта используют метод Object.create() - он перезаписывает объект заново и выставляет в нем ссылку на нужный прототип.
Ссылки связанных друг с другом объектов образуют прототипную цепочку, которая лежит в основе прототипного наследования. Ярким примером такого наследования является цепочка узлов DOM модели.
Что такое замыкание и как/для чего его используют
Если одна функция определена внутри другой, то внутренняя имеет доступ к ОВ внешней. Это называется замыканием (а также “лексической ОВ” или “статическая”.
При выполнении функции используется та область видимости переменных, которая существовала на момент объявления этой функции. Это лексическая область видимости.
Можете ли вы описать основное различие между циклом forEach и циклом .map()? И в каких случаях каждый из них используется?
forEach перебирает массив и не изменяет его.
.map() создает копию массива и изменяет копию.
В каких случаях обычно используются анонимные функции?
Анонимные функции часто используются для выполнения какого-то кода в коллбэках, где не нужно создавать отдельную именную функцию под это действие.
В чем разница между .call и .apply
Сходство заключается в том, что и .call, и .apply используются для вызова функций, а также первый параметр будет использоваться как значение this внутри функции. А разница в том, что .call в качестве следующих аргументов принимает аргументы, разделенные запятыми, в то время как .apply в качестве следующих аргументов принимает массив аргументов.
В чем разница между: function Person(){}, var person = Person(), и var person = new Person()?
function Person(){} - Мы создаем функцию с именем Person.
var person = Person() - Мы вызываем функцию Person и результат сохраняем в переменную person.
var person = new Person() - Мы создаем новый объект, используя функцию-конструктор Person.
Что такое замыкание и как/для чего его используют?
Если одна функция определена внутри другой, то внутренняя имеет доступ к ОВ внешней. Это называется замыканием (а также “лексической ОВ” или “статическая”.
При выполнении функции используется та область видимости переменных, которая существовала на момент объявления этой функции. Это лексическая область видимости.
Что делает и для чего нужна функция Function.prototype.bind?
Метод bind() создает новую функцию, которая при вызове устанавливает в качестве контекста выполнения this предоставленное значение. В метод также передается набор аргументов, которые будут установлены перед переданными в привязанную функцию аргументами при ее вызове.
что такое поднятие (hoisting) переменных
Поднятие (hoisting) — это термин, используемый для объяснения поведения объявлений переменных в коде. Переменные, объявленные при помощи ключевого слова var, будут перемещены в верхнюю часть текущей области, что мы называем “поднятием”. Поднимается только объявление переменной, присвоение значения (если оно имеется) останется на прежнем месте.
При объявлении функции её тело поднимается наверх, в то время как у функциональных выражений (когда переменной присваивается функция) поднимается только переменная.
Объясните, что такое всплытие событий (event bubbling)
При наступлении события, обработчики сначала срабатывают на самом вложенном элементе, затем на его родителе, затем выше и так далее, вверх по цепочке вложенности.
Всплытие событий является механизмом, на котором основано делегирование событий.
В чём разница между == и ===?
== - это оператор абстрактного сравнения, а === - оператор строгого сравнения. Оператор == будет сравнивать на равенство после выполнения любых необходимых преобразований типов. Оператор === не будет выполнять преобразование типов, поэтому, если два занчения не одного типа, === просто вернет false.
Объясните same-origin policy в контексте JavaScript.
Same-origin policy (принцип одинакового источника) не позволяет JS выполнять запросы за границами домена. Источник определяется как комбинация схемы URI, имени хоста и номера порта. Этот принцип не позволяет вредоносному сценарию на одной странице получить доступ к конфиденциальным данным на другой через объектную модель документа этой страницы.
Что делает строчка “use strict”;? Какие достоинства и недостатки от её использования?
use strict’ это директива, используемая для включения строгого режима во всем скрипте или отдельных функциях.
Преимущества
Не позволяет случайно создавать глобальные переменные.
Любое присваивание, которое в обычном режиме завершается неудачей, в строгом режиме выдаст исключение.
При попытке удалить неудаляемые свойства выдаст исключение (в то время как в нестрогом режиме никакого действия бы не произошло).
Требует, чтобы имена параметров функции были уникальными.
this в глобальной области видимости равно undefined.
Перехватывает распространённые ошибки, выдавая исключения.
Исключает неочевидные особенности языка.
Недостатки
Нельзя использовать некоторые особенности языка, к котороым привыкли некоторые разработчики.
Нет доступа к function.caller и function.arguments.
Объединение скриптов, написанных в строгом режиме, может вызвать проблемы.
