Js Flashcards
Что такое DOM.
Это document object model.
Это объект для взаимодействия с HTML документами.
(((( Когда браузер первый раз читает («парсит») HTML документ, он формирует большой объект - DOM. DOM используется для взаимодействия и изменения самой структуры DOM или его отдельных элементов и узлов. В JS DOM представлен объектом Document. Объект Document имеет большое количество методов для работы с элементами, их созданием, модификацией, удалением и т.д.))))
Что такое распространение события (Event Propagation)?
Событие, которое произошло в браузере, распространяется от глобального элемента window до целевого элемента и обратно.
Есть 3 фазы распространения события -
Фаза погружения,
Целевая фаза,
Фаза всплытия,
(((Когда какое-либо событие происходит в элементе DOM, оно на самом деле происходит не только в нем. Событие «распространяется» от объекта Window до вызвавшего его элемента (event.target). При этом событие последовательно пронизывает (затрагивает) всех предков целевого элемента. Распространение события имеет три стадии или фазы:
Фаза погружения (захвата, перехвата) — событие возникает в объекте Window и опускается до цели события через всех ее предков.
Целевая фаза — это когда событие достигает целевого элемента.
Фаза всплытия — событие поднимается от event.target, последовательно проходит через всех его предков и достигает объекта Window)))
В чем разница между методами event.preventDefault() и event.stopPropagation()?
Привести примеры
Метод event.preventDefault() отключает поведение элемента по умолчанию.
Нажатие кнопки «Отправить» предотвращает отправку формы
Метод event.stopPropagation() отключает распространение события (его всплытие или погружение).
Используется когда нужно остановить распространение события (дальше есть какие-то листенеры/обработчики жтого события которые не нужно вызывать)
В чем разница между операторами “==” и “===”?
Разница между оператором “==” (абстрактное или нестрогое равенство) и оператором “===” (строгое равенство) состоит в том, что первый сравнивает значения после их преобразования или приведения к одному типу (Coersion), а второй — без такого преобразования.
Что такое поднятие (Hoisting)?
Поднятие — это термин, описывающий подъем переменной или функции в глобальную или функциональную области видимости.
Var и function всплывают в самый верх функциональной области видимости.
Что такое область видимости (Scope)?
Область видимости — это место, где (или откуда) мы имеем доступ к переменным или функциям.
JS имеем три типа областей видимости: глобальная, функциональная и блочная (ES6).
Если переменной не существует в текущей области видимости, ее поиск производится выше, во внешней по отношению к текущей области видимости.
Если и во внешней области видимости переменная отсутствует, ее поиск продолжается вплоть до глобальной области видимости.
Если в глобальной области видимости переменная обнаружена, поиск прекращается, если нет — выбрасывается исключение.
Поиск осуществляется по ближайшим к текущей областям видимости и останавливается с нахождением переменной.
(((((((
Блочная -например if for
Функциональная - в теле функции
Глобальная - можно обратиться из любого место в коде к переменной
При создании области видимости она запоминает ссылку на внешнюю область видимости. Таким образом получаются цепочки области видимости. Мы из одной области видимости можем обращаться за переменными из другой области видимости
)))))))))
Что такое замыкание (Closures)?
По сути, замыкание — это способность функции во время создания запоминать ссылки на переменные , находящиеся в текущей области видимости.
Какое значение имеет this?
this ссылается на значение объекта, который в данный момент выполняет или вызывает функцию.
(((((((((
Методу объекта обычно требуется доступ к информации, хранящейся в объекте, для выполнения своей работы.
Для доступа к информации внутри объекта метод может использовать ключевое слово this.
«В данный момент» означает, что значение this меняется в зависимости от контекста выполнения, от того места, где мы используем this.
const carDetails = {
name: ‘Ford Mustang’,
yearBought: 2005,
getName() {
return this.name
}
isRegistered: true
}
console.log(carDetails.getName()) // Ford Mustang
————————————————————
var name = ‘Ford Ranger’
var getCarName = carDetails.getName
console.log(getCarName()) // Ford Ranger
Стрелочные функции не имеют собственного значения this. Они копируют значение this из внешнего лексического окружения.
))))))))))))))))
Для чего используется метод Function.prototype.apply?
Apply используется для привязки определенного объекта к значению this вызываемой функции. Функция вызывается сразу
Первым аргументом передается обект, вторым масив с аргументами функции.
Для чего используется метод Function.prototype.call?
Call используется для привязки определенного объекта к значению this вызываемой функции. Функция вызывается сразу
Первым аргументом передается обект, следующие аргументы перечисляются через запятую и я являются аргуметами функции
Что такое прототип объекта?
Прототипы - это механизм, с помощью которого объекты JavaScript наследуют свойства друг от друга.
Prototype есть только у классов и function decloration. У остальных типов данных его нету.
Если мы хотим прочитать свойство obj или вызвать метод, которого не существует у obj, тогда JavaScript попытается найти его в прототипе.
Потом в прототипе прототипа и так далее до тех пор пока не будет значение null
function Person(first, last, age, gender, interests) {
// Определения методов и свойств
this.name = {
first: first,
last: last,
};
this.age = age;
this.gender = gender;
//…см. Введение в объекты для полного определения
}
var person1 = new Person(“Bob”, “Smith”, 32, “male”, [“music”, “skiing”]);
Что такое функциональное программирование и какие особенности JS позволяют говорить о нем как о функциональном языке программирования?
ФП - это набор концепций, правил и особенностей при написании кода
Концепции ФП:
- Деклоративность
- Чистые функции
- Функции высшего порядка
- Имутабельность (неизменяемость)
Деклоративность:
Декларируем какой результат мы хотим получить.
Есть два подхода к написанию кода: Императивный и деклоративный. В декларативном подходе мы описываем что мы хотим получить (описываем результат). В императивном мы описываем как мы хотим получить (описываем действия).
(((((((
Пример с такси
https://images.ctfassets.net/htsjgx8vu9xb/18LKaY0g2uD4lbenBH3OYv/6c3007966c1189b46e92373416d2872c/Screenshot_2024-11-09_at_15.02.41.png
Те в декларативном подходе мы на каком-то уровне пишем самодокументирующие функции, и из их названия понятен результат на выходе
https://images.ctfassets.net/htsjgx8vu9xb/4C5gxv0ONVjSBXYV3zTO6q/6ad3f2dc87c2bdcd3b16d57ce509bee9/Screenshot_2024-11-09_at_15.06.46.png
)))))))))))))
- Чистые функции
—-При одинаковых значениях аргументов функции функция возвращает один и тот же результат
—-Не зависят от внешних состояний и глобальных переменных
—-Не зависит от сайд еффектов (не содержит запросов на сервер, логирование, асинхронные действия)
-Имутабельность
Мы не мутируем(изменяем) уже существующие данные, а создаем новые данные и ведем работу уже с этими данными. Хочешь изменить существующие данные - делай копию и работай с ней.
Почему мутирование плохо?
-Несогласованность данных
-Услложняет дебаг и тестирование кода
-функции высшего порядка:
Функция высшего порядка - функция которая может принимать функцию в кач-ве аргумента и возвращать функцию
Что такое функции высшего порядка (Higher Order Functions)?
Функция высшего порядка — это функция, возвращающая другую функцию или принимающая другую функцию в качестве аргумента.
Что такое ECMAScript?
Это стандарт. ECMAScript — это спецификация того, какможетвыглядеть скриптовый язык.
JavaScript -
cкриптовый язык общего назначения, соответствующий спецификации ECMAScript.
Можем преобразовать более новую спецификацию ES в более старую для того чтобы код выполнялся для всех браузеров. Для этого используем bable
((((((((((((
JavaScript-движок - Программа или интерпретатор, способный понимать и выполнять JavaScript-код.
При желании, разработчики могут с помощью Babel преобразовать — транспилировать — код ES6 в функционально эквивалентную версию, использующую только функции ES5. Все основные браузеры полностью поддерживают ES5, поэтому транспилированный код будет работать без каких-либо проблем.
JavaScript был создан в 1996 году. В 1997 году Ecma International предложила стандартизировать JavaScript, и в результате появился ECMAScript. Но поскольку JavaScript соответствует спецификации ECMAScript, JavaScript является примером реализации ECMAScript.
)))))))))))))
Cтандарт ES6 или ECMAScript2015
Вот что вышло в ES6:
Стрелочные функции (Arrow Functions).
Классы (Classes).
Шаблонные строки (Template Strings).
Расширенные объектные литералы (Enhanced Object literals).
Деструктуризация (Object Destructuring).
Промисы (Promises).
Генераторы (Generators).
Модули (Modules).
Symbol.
Прокси (Proxies).
Множества (Sets).
Параметры по умолчанию.
Операторы rest и spread.
Блочная область видимости (ключевые слова «let» и «const»).
Что такое классы (Classes)?
Шаблондля созданияобъектов, описывающая их свойства и методы.
У класса есть гетеры сетеры, constructor, приватные свойства, статические методы
Что такое деструктуризация объекта (Object Destructuring)?
Извлечения значений объекта или массива.
{{{{{{{
let { firstName, lastName, position, yearHired } = employee
}}}}}}}}
Что такое функция обратного вызова (Callback Function)?
Функция обратного вызова — это функция, вызов которой отложен на будущее
В чем разница между spread-оператором и rest-оператором?
(rest - остальные, spread - распространение)
Операторы spread и rest имеют одинаковый синтаксис (“…”). Разница состоит в том, что с помощью spread мы передаем или распространяем данные массива на другие данные:
const myProps = { title: “Заголовок”, description: “Описание” };
return <MyComponent {…myProps} />;
а с помощью rest — получаем все параметры функции и помещаем их в массив (или извлекаем часть параметров).
function showName(firstName, lastName, …titles) {
Что такое объектная обертка (Wrapper Objects)?
У каждого примитива, кроме null и undefined, есть объект-обертка.
Объект-обертка - это объект предоставляющий дополнительные методы для работы с примитивом.
Когда мы пытаемся обратится к примитиву как к объекту:
(23.456). toFixed(1);
Интерпретатор временно оборачивает, примитив в объект вызовом new Number(23.456) и потом уже у этого объекта вызывает метод toFixed()
Временный объект отбрасывается по завершении работы со свойством или методом.
В чем разница между явным и неявным преобразованием или приведением к типу (Implicit and Explicit Coercion)?
Неявное преобразование — это способ приведения значения к другому типу без нашего участия.
Явное преобразование предполагает наше участие в приведении значения к другому типу
Number(‘123’)
Как проверить, является ли значение массивом?
Array.isArray(5)
Что такое NaN? Как проверить, является ли значение NaN?
Number.isNaN()
undefined + 1
Как в JS создать объект?
const o = {
name: ‘Mark’,
greeting(){
return Hi, I'm ${this.name}
}
}
Функция-конструктор:
function Person(name){
this.name = name
}
const mark = new Person(‘Mark’)
Метод Object.create:
const n = {
greeting(){
return Hi, I'm ${this.name}
}
}
const o = Object.create(n)
o.name = ‘Mark’
console.log(o.greeting) // Hi, I’m Mark
В чем разница между обычной функцией и функциональным выражением
Function extentioin поднимается в отличие от Functioin declaration.
(((((((((((
Вызов notHoistedFunc приведет к ошибке, а вызов hoistedFunc нет, потому что hoistedFunc «всплывает», поднимается в глобальную область видимости, а notHoistedFunc нет.
hoistedFunc()
notHoistedFunc()
function hoistedFunc(){
console.log(‘I am hoisted’)
}
var notHoistedFunc = function(){
console.log(‘I will not be hoisted!’)
}
))))))))))))
Что такое запоминание или мемоизация (Memoization)?
Мемоизация — это прием создания функции, способной запоминать ранее вычисленные результаты или значения.
Преимущество мемоизации заключается в том, что мы избегаем повторного выполнения функции с одинаковыми аргументами.
Недостатком является то, что мы вынуждены выделять дополнительную память для сохранения результатов.
Для чего используется ключевое слово «new»?
Ключевое слово «new» используется в функциях-конструкторах для создания нового объекта .
Функция конструктор начинается с большой буквы
(((((((((((((
Обычный синтаксис {…} позволяет создать только один объект. Но зачастую нам нужно создать множество похожих, однотипных объектов, таких как пользователи, элементы меню и так далее.
Это можно сделать при помощи функции-конструктора и оператора “new”
Допустим, у нас есть такой код:
function Employee(name, position, yearHired){
this.name = name
this.position = position
this.yearHired = yearHired
}
const emp = new Employee(‘Marko Polo’, ‘Software Development’, 2017)
Что происходит когда выполняется new Employee:
Создает пустой объект.
Привязывает к нему значение this.
Выполняется тело функции. Обычно оно модифицирует this, добавляя туда новые свойства.
Возвращается значение this
)))))))))))))
‘use strict’ или строгий режим
‘use strict’включает строгий режим выполнения JavaScript. Эта строка должна располагаться в самом начале функции
Нет никакого способа отменитьuse strict
- Нельзя присваивать значение в неопределённую переменную
x = 5; // ReferenceError: x is not defined - Нельзя использовать инструкцию with, eval
- Нельзя определить повторные свойства в объекте
var x = {
a: 1,
a: 2
} - Нельзя определять функции с повторяющимися аргументами
function f(a, a) {
“use strict”;
} // SyntaxError: Strict mode function may not have duplicate parameter names - Нельзя использовать слова зарезервированные для будущего использования (в переменных например)
implements, let, private, public, yield, interface, package, protected, static
Модули в js
По мере роста нашего приложения, мы обычно хотим разделить его на много файлов, так называемых «модулей».
Модули могут загружать друг друга и использовать директивыexportиimport, чтобы обмениваться функциональностью, вызывать функции одного модуля из другого:
exportотмечает переменные и функции, которые должны быть доступны вне текущего модуля.
importпозволяет импортировать функциональность из других модулей.
В модулях используется:
- ‘use strict’
- Каждый модуль имеет свою собственную область видимости.
- Код в модуле выполняется только один раз при импорте
Что такое javascript
Это мультипарадигменный язык програмирования.
Является реализацией спецификации ECMAScript
Переменные в js
Переменные, константы используются для хранения информации.
Для создания переменной в JavaScript используйте ключевое словоlet.
- Может быть обявлена только 1 раз (var допускает повторное объявление)
- Имя переменной должно содержать только буквы, цифры или символы$и_. Нелатинские буквы разрешены, но не рекомендуются
- Существуетсписок зарезервированных слов, которые нельзя использовать в качестве имён
- Let и const имеют блочную область видимости, var функциональную
- у var есть hosting, ее опреденение всплывает вверх функции, let const нет
Типы данных в js
Есть восемь основных типов данных в JavaScript. Это
number, BigInt, string, boolean, null, undefined, object, symbol .
BIGINT
BIGINT тип нужен для работы с большими числами (если число боьлше 2 в 252). Работает с целыми числами. На конце числа добавляется n.
null
null это значение задано и оно пустое, не известно
undefined
означает, что «значение не было присвоено».
Если переменная объявлена, но ей не присвоено никакого значения, то её значением будетundefined.
Типobject(объект) – особенный.
Все остальные типы называются «примитивными», потому что их значениями могут быть только простые значения (будь то строка, или число, или что-то ещё). В объектах можно хранить различные типы данных.
symbol
Примитивный тип данных, использующийся для создания уникальных идентификаторов.
Символы создаются вызовом функцииSymbol(), в которую можно передать описание (имя) символа.
((((((((((
Как узнать тип данных? Использовать typeof(имя переменной)
)))))))))
