Что представляет собой механизм всплытия событий в JavaScript? Приведите пример.
После того, как событие сработает на элементе, оно также сработает на родителях, вверх по дереву DOM, если это событие нигде принудительно не прервут.
Приведу пример:
<div> первый
<div> второй
<div> третий</div>
</div>
</div>Клик по div “третий” вызывает событие onclick сначала на элементе “третий”, затем на элементе “второй” и в конце концов на элементе “первый”. Это и называется всплытием, событие всплывает от самого вложенного элемента вверх через родителей. Так будет продолжаться пока не достигнем объект Document и затем Window. Всплытие реализовано во всех браузерах, включая IE.
Что такое глобальные переменные ? Как они создаются ? Какие проблемы связаны с использованием глобальных переменных?
Глобальная переменная - переменная, которая доступна (видима) во всем документе, в отличии от локальной (ограничена рамками блока программного кода, внутри которого она определена)
Пример:
var myvar = 5;
function myFunction(){
alert(myvar); // 5
} Большинство JavaScript разработчиков избегает использования глобальных переменных. Одна из причин - возможный конфликт имен глобальных и локальных переменных. Так же код использующий глобальные переменные может быть тяжелее сопровождать и тестировать.
С помощью какой конструкции языка можно управлять потоком выполнения скрипта и отслеживать ошибки?
Это возможно с помощью конструкции try{}... catch{}
try {
var number = 9;
alert( number.toString(2) );
// ...
alert('Выполнено без ошибок!');
} catch(e) {
alert('Ошибка!');
} Работает это так:
Выполняется код внутри блока try. Если в нём возникнет ошибка, то выполнение try прерывается, и управление прыгает в начало блока catch.
background-blend-mode
Режим смешивания фоновых слоёв — алгоритм, определяющий механизм взаимодействия пикселей каждого слоя. Фон одного элемента может иметь несколько слоёв.
Как добавлять элементы на HTML страницу динамически ?
Создание новых элементов осуществляется с помощью document.createElement(tagName);
После создания элемента его нужно присоединить к родительскому элементу с помощью .appendChild(node);
Что такое hoisting или “поднятие переменных”? Что произойдет при выполнении кода с картинки?
Интерпретатор JavaScript всегда перемещает («поднимает») объявления функций и переменных в начало области видимости (вверх текущего скрипта или функции).
В чём опасность использования for .. in для объекта или массива?
For..in итерируется по всем полям объекта и его прототипов (т.е. проходит по всей цепочке прототипов).
Какие преимущества и недостатки при использовании промисов вместо колбэков (callbacks)?
Преимущества
- Помогает избежать “callback hell”, который может быть нечитаемым.
- Упрощает написание последовательного удобочитаемого асинхронного кода с помощью .then().
- Упрощает написание параллельного асинхронного кода с помощью Promise.all().
- С использованием промисов можно избежать следующих проблем, которые возникают при использовании callback-функций:
a) Колбэк-функция была вызвана слишком рано
b) Колбэк-функция была вызвана слишком поздно (или вовсе не была вызвана)
c) Колбэк-функция была вызвана слишком мало или слишком много раз
d) Не удалось передать необходимую среду/параметры
e) Были пропущены ошибки/исключения
Недостатки
1) Чуть более сложный код (спорно).
2) В старых браузерах, где не поддерживается ES2015, вам нужно загрузить полифил, чтобы их использовать.
Почему считается хорошим тоном оставить глобальную область видимости (global scope) в нетронутом состоянии?
Каждый скрипт имеет доступ к глобальной области видимости, и если каждый будет использовать глобальное пространство имен для определения своих переменных, то могут возникнуть конфликты. Используйте модульный паттерн (используя IIFE) для инкапсуляции ваших переменных в локальное пространство имен.
Что делает строчка “use strict”;? Какие достоинства и недостатки от ее использования?
use strict’ это директива, используемая для включения строгого режима во всем скрипте или отдельных функциях.
Преимущества:
- Не позволяет случайно создавать глобальные переменные.
- Любое присваивание, которое в обычном режиме завершается неудачей, в строгом режиме выдаст исключение.
- При попытке удалить неудаляемые свойства, выдаст исключение (в то время как в нестрогом режиме никакого действия бы не произошло).
- Требует, чтобы имена параметров функции были уникальными.
- this в глобальной области видимости равно undefined.
- Перехватывает распространенные ошибки, выдавая исключения.
- Исключает неочевидные особенности языка.
Недостатки:
- Нельзя использовать некоторые особенности языка, к которым привыкли некоторые разработчики.
- Нет доступа к function.caller и function.arguments.
- Объединение скриптов, написанных в строгом режиме может вызвать проблемы.
Расскажите об Ajax как можно более подробно
Ajax (асинхронный JavaScript и XML) - это набор методов веб-разработки, использующих множество веб-технологий на стороне клиента для создания асинхронных веб-приложений.
С помощью Ajax веб-приложения могут отправлять данные на сервер и получать их с сервера асинхронно (в фоновом режиме), не влияя на отображение и поведение открытой страницы. Отделяя уровень обмена данными от уровня представления, Ajax позволяет веб-страницам и, в частности, веб-приложениям динамически изменять содержимое без необходимости перезагрузки всей страницы. На практике для получения/передачи данных используется формат данных JSON вместо XML из-за того, что JSON основан на JavaScript.
Раньше для асинхронного взаимодействия использовали XMLHttpRequest API, а сейчас принято использовать fetch API.
Что такое строка User Agent?
Это строка, сообщаемая браузером, которая позволяет узлам сетевого протокола определить тип приложения, операционную систему, поставщика программного обеспечения или версию программного обеспечения пользователя от которого исходит запрос.
Доступ к ней можно получить через navigator.userAgent. Тем не менее, строка User Agent сложна для обработки и может быть подделана. Например, браузер Chrome идентифицируется как Chrome, так и Safari.
Таким образом, чтобы обнаружить браузер Safari, вы должны проверить на наличие строки Safari и отсутствие строки Chrome. Избегайте этого метода.
В чем разница между .call и .apply?
Сходство заключается в том, что и .call, и .apply используются для вызова функций, а также первый параметр будет использоваться как значение this внутри функции. А разница в том, что .call в качестве следующих аргументов принимает аргументы, разделенные запятыми, в то время как .apply в качестве следующих аргументов принимает массив аргументов.
Что такое замыкание и как/для чего его используют?
Замыкание — это комбинация функции и лексического окружения, в которой эта функция была объявлена. Слово “лексический” относится к тому факту, что лексическая область видимости использует место, где переменная объявлена в исходном коде, чтобы определить, где эта переменная доступна. Замыкания — это функции, которые имеют доступ к переменным внешней (замыкающей) функции — цепочке областей видимости даже после того, как внешняя функция вернулась.
Для чего его используют?
- Конфиденциальность данных / эмуляция скрытых методов при помощи замыканий. Обычно используется в модульном паттерне.
- Частичное применение функций или каррирование.
Объясните, как this работает в JavaScript
Нельзя в двух словах объяснить работу ключевого слова this; это одно из самых запутанных понятий в JavaScript. Говоря максимально простым языком, значение this зависит от того, как вызывается функция.
Применяются следующие правила:
- Если ключевое слово new используется при вызове функции, this внутри функции является совершенно новым объектом.
- Если для вызова/создания функции используются apply, call или bind, то this внутри функции — это объект, который передается в качестве аргумента.
- Если функция вызывается как метод, например, obj.method(), то this — это объект, к которому принадлежит функция.
- Если функция вызывается без контекста, то есть она вызывается без условий, описанных в пунктах выше, то this является глобальным объектом. В браузере это объект window. В строгом режиме (’use strict’), this будет undefined вместо глобального объекта.
- Если применяются несколько из вышеперечисленных правил, то правило, которое выше выигрывает и устанавливает значение this.
- Если функция является стрелочной функцией, то она игнорирует все вышеописанные правила и получает значение this из лексического окружения во время ее создания.
Объясните делегирование событий
Делегирование событий — это приём, заключающийся в добавлении обработчиков событий к родительскому элементу, а не к дочерним элементам. Обработчик будет срабатывать всякий раз, когда событие будет запущено на дочерних элементах благодаря всплытию событий в DOM.
Преимущества этого приёма:
- Экономит объем используемой памяти, т.к. для родительского элемента требуется только один обработчик.
- Не нужно привязывать или убирать обработчики при добавлении и удалении элементов.
Что такое запросы между источниками и CDN?
Запросы из разных источников, отправленные в другой домен (даже субдомен), протокол или порт требуют специальных заголовков с удаленной стороны. Эта политика называется «CORS»: совместное использование ресурсов между источниками.
CDN (сеть доставки контента) – это группа серверов, расположенных во многих местах. Эти серверы хранят дублированные копии данных, чтобы серверы могли выполнять запросы данных в зависимости от того, какие серверы находятся ближе всего к соответствующим конечным пользователям. CDN обеспечивают быстрое обслуживание и меньше подвержены влиянию высокого трафика.
Что такое Promise? Для чего он нужен?
Promise – это специальный объект, который содержит своё состояние. Вначале pending («ожидание»), затем – одно из: fulfilled («выполнено успешно») или rejected («выполнено с ошибкой»).
Синтаксис создания Promise:
let promise = new Promise(function(resolve, reject) {
// функция-исполнитель (executor)
// “певец”
});
Функция, переданная в конструкцию new Promise, называется исполнитель (executor). Когда Promise создаётся, она запускается автоматически. Она должна содержать «создающий» код, который когда-нибудь создаст результат. В терминах нашей аналогии: исполнитель – это «певец».
Её аргументы resolve и reject – это колбэки, которые предоставляет сам JavaScript. Наш код – только внутри исполнителя.
Когда он получает результат, сейчас или позже – не важно, он должен вызвать один из этих колбэков:
resolve(value) — если работа завершилась успешно, с результатом value.
reject(error) — если произошла ошибка, error – объект ошибки.
