JavaScript

  • Примитивные типы в JS, отличие от object

Есть 5 «примитивных» типов: number, string, boolean, null (специальное значение, которое имеет смысл «значение неизвестно»), undefined («значение не присвоено») и 6-й тип – object (используется для коллекций данных и для объявления более сложных сущностей.). Примитивные типы не могут иметь свойств, но стоит помнить, что JS под капотом производит автоматическую конвертацию типов. Все примитивные типы иммутабельный.

Объекты (они же - ассоциативные массивы, хэши) в JavaScript представляет собой обычный ассоциативный массив: структуру, пригодную для хранения любых данных в формате ключ - значение и имеет несколько стандартных методов.

Бывают обычные и специальные объекты. К последним относятся: Массив, Функция, Даты, Регулярные выражения, Ошибки.

Разница между примитивными и ссылочными типами данных:

Когда мы присваиваем переменную простого типа в другую, она копирует значение. В результате каждая переменная будет иметь своё значение и изменения в одной из переменных никак не сказывается на значении другой переменной.

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

Примитивы не являются объектами, но методы берут из соответствующих прототипов:Number.prototype,Boolean.prototype,String.prototype.

По стандарту, если обратиться к свойству числа, строки или логического значения, то будет создан объект соответствующего типа, напримерnew Stringдля строки,new Numberдля чисел,new Boolean– для логических выражений.

Далее будет произведена операция со свойством или вызов метода по обычным правилам, с поиском в прототипе, а затем этот объект будет уничтожен.

  • Метаданные

Информация о другой информации, или данные, относящиеся к дополнительной информации о содержимом или объекте. Метаданные раскрывают сведения о признаках и свойствах, характеризующих какие-либо сущности, позволяющие автоматически искать и управлять ими в больших информационных потоках.

Метапрограммирование — это парадигма программирования, построенная на программном изменении структуры и поведения программ.

  • Array in JS, in memory (что случается?)
  • Что такое string в JS?

Глобальный объект String является конструктором строк, или, последовательностей символов. Любые текстовые данные являются строками. Не существует отдельного типа «символ», который есть в ряде других языков.

  • Standart libraries
  • Что такое Event loop (цикл событий), как реализуется асинхронность в JS?

В каждом окне выполняется только один главный поток, который занимается выполнением JavaScript, отрисовкой и работой с DOM. Он выполняет команды последовательно, может делать только одно дело одновременно и блокируется при выводе модальных окон, таких как alert.

! Одновременно с этим, существуют служебные потоки, которыми мы не можем управлять. (например, сетевые коммуникации, скачивание файлов...). Также существует спецификация Web Workers, которая позволяет запускать дополнительные JavaScript-процессы (workers).

Очередь событий

Цикл событий решает одну основную задачу: наблюдает за стеком вызовов и очередью коллбэков (callback queue). Если стек вызовов пуст, цикл берёт первое событие из очереди и помещает его в стек, что приводит к запуску этого события на выполнение. Подобная итерация называется тиком (tick) цикла событий. Каждое событие — это просто коллбэк.

Когда происходит событие, оно попадает в очередь. Внутри браузера непрерывно работает «главный внутренний цикл», который следит за состоянием очереди и обрабатывает события, запускает соответствующие обработчики и т.п. Иногда события добавляются в очередь сразу пачкой. При этом, каждое событие из очереди обрабатывается полностью отдельно от других.

Синхронные события (вложенные)

В тех случаях, когда событие инициируется не пользователем, а кодом, то оно, как правило, обрабатывается синхронно, то есть прямо сейчас. Исключения есть в IE (например, onfocus, там асинхронное).

Асинхронность в JS

  • Можно запланировать исполнение метода чуть позже через setTimeout(..., 0).

  • Задания ES6. Очередь заданий — это очередь, которая присоединена к концу каждого тика в очереди цикла событий. Некие асинхронные действия, которые могут произойти в течение тика цикла событий не приведут к тому, что новое событие будет добавлено в очередь цикла событий, но вместо этого задание будет добавлено в конец очереди заданий текущего тика. Это означает, что добавляя в очередь команды, которые должны быть выполнены в будущем, вы можете быть уверены в том, в каком порядке они будут выполняться. Дают возможность соблюдения последовательности операций.

  • Проммисы / ES8: async / await

  • Коллбеки

Итог

JavaScript выполняется в едином потоке. Современные браузеры позволяют порождать подпроцессы.

  • Web Workers, они выполняются параллельно и могут отправлять/принимать сообщения, но не имеют доступа к DOM.
  • Обычно события становятся в очередь и обрабатываются в порядке поступления, асинхронно, независимо друг от друга.
  • Синхронными являются вложенные события, инициированные из кода.

Отложенный вызов черезsetTimeout(func, 0)используется не только в событиях, а вообще – всегда, когда мы хотим, чтобы некая функцияfuncсработала после того, как текущий скрипт завершится.

https://habr.com/company/ruvds/blog/337042/

https://habr.com/company/ruvds/blog/340508/

  • Что такое promise? Какие основные методы реализуются в promise? Что такое async / await?

Promise – это специальный объект, который содержит своё состояние. Вначалеpending(«ожидание»), затем – одно из:fulfilled(«выполнено успешно») илиrejected(«выполнено с ошибкой»).

Наpromiseможно навешивать коллбэки двух типов:

  • onFulfilled – срабатывают, когда promise в состоянии «выполнен успешно».

  • onRejected
    – срабатывают, когда
    promise
    в состоянии «выполнен с ошибкой».

  • Что такое замыкание? Как реализуется?

Замыкание - это функция, содержащая в себе ссылки на переменные из внешней области видимости. Т.е. она "замыкает" внешние переменные в себе.

Простыми словами это внутренняя функция, т.е. функция в функции. Замыканием называют потому, что после выполнения родительской или внешней функции, код внутренней все еще "живет" в интерпретаторе, и его можно выполнить. Ошибок не возникнет даже если внутренняя функция (замыкание) будет использовать переменные из внешней функции. Например, эту особенность можно использовать для создания функций обработчиков событий:

  • Что такое каррирование?

Это приём в функциональном программировании, позволяющий преобразовать функцию, заменив её несколько первых аргументов константными значениями, тем самым создав новую функцию с меньшим количеством аргументов на основе старой.

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

Помогает писать более чистый и элегантный код.

function addBase(base){
  return function(num){
    return base + num;
  }
}

var addTen = addBase(10);
addTen(5); //15
addTen(80); //90
addTen(-5); //5

В данном примере, используя каррирование, вы прибавляете новое число к уже заданному.

  • Какая функция является "чистой" в JS?

Функция называется чистой, если она удовлетворяет двум условиям:

  1. Возвращает точно такой же результат каждый раз, когда она вызывается с тем же набором аргументов.

  2. Выполнение функции не изменяет какое-либо состояние за пределами её области видимости и не оказывает видимого воздействия на внешний мир, кроме возвращения значения (никаких побочных эффектов).

  3. Что такое функция "высшего порядка"?

Функция высшего порядка — это функция, которая может принимать другую функцию в качестве аргумента или возвращать другую функцию в качестве результата.

  • Что такое функция как объект первого класса?

В JavaScript функции являются объектами первого класса, то есть они могут быть значением переменной, которое может быть передано, возвращено по ссылке и переназначено; обладают типом Object.

  • Что такое мемоизация (кэширование)? Простейший пример использования?

Мемоизация — сохранение результатов выполнения функций для предотвращения повторных вычислений. Это один из способов оптимизации, применяемый для увеличения скорости выполнения компьютерных программ. Перед вызовом функции проверяется, вызывалась ли функция ранее: если не вызывалась, функция вызывается и результат её выполнения сохраняется; если вызывалась, используется сохранённый результат.

Пример:

Мемоизация полезна, когда вы передаёте в функцию заранее известный набор аргументов и когда результат функции будет всегда одинаковым при одинаковых аргументах. Если же функция не даёт одинакового результата при тех же аргументах, то мемоизация будет бесполезна.

  • Наследование в JS? Какие типы наследования есть? Чем прототипное отличается от классического?

В JavaScript каждый объект может иметь ассоциацию с другим объектом - так называемый "прототип" (prototype). В случае, если поиск некоторого свойства (или метода) в исходном объекте заканчивается неудачно, интерпретатор пытается найти одноименное свойство (метод) в его прототипе, затем - в прототипе прототипа и т. д. К примеру, если мы затребовали обращение к obj.prop (или, что абсолютно то же самое, obj['prop']), JavaScript начнет искать свойство prop в самом объекте obj, затем – в прототипе obj, прототипе прототипа obj, и так до конца.

  • Ecmascript2015: чем отличаются между собой const, var и let?

const - обязательно должны быть определены со значением и не могут изменяться впоследствии (исключение для отдельных свойств объектов). идентификатор не будет переприсвоен

let - это признак переменной, которая может быть переприсвоена, как счетчик цикла или значение в математическом алгоритме. Также это признак того, что переменная используется только в том блоке, в котором она определена, а не во всей функции.

var- это самый слабый признак переменной в JavaScript. Такая переменная может переприсваиваться или не переприсваиваться, может использоваться как в блоке, так и во всей функции.

  • Что такое контекст в js? У кого он есть? В каком случае он теряется?

Ключевое слово this в javascript не привязывается к объекту, а зависит от контекста вызова.

*При простом вызове функции / самовызывающиеся функции, this указывает на глобальный объект windows.

function f() {
    console.log(this === window); // true
}
f();

//or

(function () {
    console.log(this === window); // true
})();

*При вызове функции с использованием ключевого слова new функция выступает в роли конструктора, и в данном случае this указывает на создаваемый объект.

function f() {
    this.x = 5;
    console.log(this === window); // false
}
var o = new f();
console.log(o.x === 5); // true

*Если функция запускается как свойство объекта, то в this будет ссылка на этот объект. При этом не имеет значения, откуда данная функция появилась в объекте, главное — как она вызывается, а именно какой объект стоит перед вызовом функции.

var o = {
    f: function() {
        return this;
    }
}
var o2 = {f: o.f};
console.log(o.f() === o); //true
console.log(o2.f() === o2); //true

*Методы apply и call позволяют задать контекст для выполняемой функции. Разница между apply и call — только в способе передачи параметров в функцию. Первый параметр обеих функций определяет контекст выполнения функции (то, чему будет равен this).

function f() {
}
f.call(window); // this внутри функции f будет ссылаться на объект window
f.call(f); //this внутри f будет ссылаться на f

вот так.

  • Принцип работы и назначение методов bind, call, apply (+сигнатуры)

call - вызов функции с подменой контекста - this внутри функции.

При этом вызывается функцияfunc, первый аргументcallстановится еёthis, а остальные передаются «как есть».

Вызовfunc.call(context, a, b...)– то же, что обычный вызовfunc(a, b...), но с явно указаннымthis(=context).

// Сигнатура: 
func.call(context, arg1, arg2, ...)

bind - используется преимущественно для того, чтобы вызвать функцию с явным указанием значения this. Другими словами, bind() позволяет нам указать, ссылка на какой объект будет значением this, когда функция будет вызвана, и вызвать эту функцию. Этот метод появился в стандарте ES5; позволяет выполнить отложенный вызов функции.

// Сигнатура:
const resultAA = promote.bind(junior);
const resultAAA = resultAA('super junior developer', 1200);

apply - вызов функции с переменным количеством аргументов и с подменой контекста. Если нам неизвестно, с каким количеством аргументов понадобится вызвать функцию, можно использовать более мощный метод: apply.

Вызов функции при помощи func.apply работает аналогично func.call, но принимает массив аргументов вместо списка.

// Сигнатура:
func.apply(context, [arg1, arg2]);
  • Что такое всплытие событий?

Принцип: При наступлении события обработчики сначала срабатывают на самом вложенном элементе, затем на его родителе, затем выше и так далее, вверх по цепочке вложенности. Но! Есть исключения: например, focus.

На каком бы элементе мы ни поймали событие, всегда можно узнать, где конкретно оно произошло.
Самый глубокий элемент, который вызывает событие, называется «целевым» / «исходным» элементом и доступен как event.target.

Отличия от this (=event.currentTarget):

  • event.target – это исходный элемент, на котором произошло событие, в процессе всплытия он неизменен.
  • this – это текущий элемент, до которого дошло всплытие, на нём сейчас выполняется обработчик.

Например, если стоит только один обработчик form.onclick, то он «поймает» все клики внутри формы. Где бы ни был клик внутри – он всплывёт до элемента <form>, на котором сработает обработчик.

При этом: this (=event.currentTarget) всегда будет сама форма, так как обработчик сработал на ней.

event.target будет содержать ссылку на конкретный элемент внутри формы, самый вложенный, на котором произошёл клик.

Любой промежуточный обработчик может решить, что событие полностью обработано, и остановить всплытие.

Для остановки всплытия нужно вызвать методevent.stopPropagation().

Для того, чтобы полностью остановить обработку, современные браузеры поддерживают метод

event.stopImmediatePropagation().

  • Популярные протоколы обмена данными
  • Основные типы http запросов? В чем отличие GET и POST?

Тип HTTP-запроса (HTTP-метод) указывает серверу на то, какое действие мы хотим произвести с ресурсом.

Основные:

GET — получение ресурса

POST — создание ресурса

PUT — обновление ресурса

DELETE — удаление ресурса

Основное различие методов GET и POST состоит в способе передачи данных веб-формы обрабатывающему скрипту.

Метод GET отправляет скрипту всю собранную информацию формы как часть URL:

http://www.komtet.ru/script.php?login=admin&name=komtet

Метод POST передает данные таким образом, что пользователь сайта уже не видит передаваемые скрипту данные:

http://www.komtet.ru/script.php
  • Разница между http и http 2.0?

HTTP 2.0 - это бинарный протокол, который мультиплексирует многочисленные потоки, проходящие через одно TCP-соединение. Содержимое каждого потока - это HTTP 1.1 запросы и ответы, просто кодированные и упакованные по-разному. HTTP2 добавляет ряд функций для управления потоками, но оставляет старую семантику нетронутой.

HTTP/2 поддерживает мультиплексирование запросов, сжатие заголовков, приоритет и более интеллектуальное управление потоковой передачей пакетов. Это приводит к снижению латентности и ускоряет загрузку контента на современных веб-страницах.

Протокол HTTP/2 существенно ускоряет открытие сайтов за счет следующих особенностей:

соединения: несколько запросов могут быть отправлены через одно TCP-соединение, и ответы могут быть получены в любом порядке. Отпадает необходимость держать несколько TCP-соединений;

приоритеты потоков: клиент может задавать серверу приоритеты — какого типа ресурсы для него более важны, чем другие;

сжатие заголовка: размер заголовка HTTP может быть сокращен;

push-отправка данных со стороны сервера: сервер может отправлять клиенту данные, которые тот еще не запрашивал, например, на основании данных о том, какую следующую страницу открывают пользователи.

  • MVC - что это? Что должно находиться в каждой из сущностей? Какие еще шаблоны существуют?

  • Что такое синглтон и как его реализовать?

  • Что такое декоратор и как его реализовать?

  • Шаблон Observer? Как работает "Наблюдатель"?

  • Диагностика и исправление торможения сайта.

  • Классические алгоритмы

  • Какая разница между операторами == и ===?

  • Оператор == сравнивает на равенство, а вот === сравнивает на идентичность. Плюс оператора === состоит в том, что он не приводит два значения к одному типу. Именно из-за этого он обычно и используется.

  • Что такое глобальные переменные? Как они создаются?

Глобальная переменная - переменная, которая доступна (видима) во всем документе, в отличии от локальной (ограничена рамками блока программного кода, внутри которого она определена). Большинство JavaScript разработчиков избегает использования глобальных переменных. Одна из причин - возможный конфликт имен глобальных и локальных переменных. Так же код использующий глобальные переменные может быть тяжелее сопровождать и тестировать.

  • Прототипы в JS

В общих чертах prototype - это свойство позволяющее добавлять уже существующим объектам свойства, также используется для эмуляции наследования классов в JavaScript. Prototype.js - популярная библиотека добавляющая удобные ООП возможности в программы на JavaScript-е.

  • Фреймворки с которыми работали? Какие сильные и слабые стороны? Проблемы какого рода решают?

От меня:

  • Две наиболее важные для JavaScript-разработчика парадигмы программирования?
  • Что такое функциональное программирование?
  • Разница между классовым и прототипным наследованием?
  • Плюсы и минусы функционального и объектно-ориентированного программирования?
  • Когда лучше использовать прототипное наследование?
  • Что значит «композиция объектов лучше, чем наследование классов»?
  • Что такое двусторонняя связь данных и однонаправленный поток данных и в чем разница между ними?
  • Каковы плюсы и минусы монолитной архитектуры и микросервисов?

results matching ""

    No results matching ""