React Frontend Developer

Question 1

Что такое HTML5 History API и как его использовать для управления навигацией без перезагрузки страницы?

Accepted Answer

HTML5 History API позволяет изменять URL в браузере без перезагрузки страницы, сохраняя историю переходов. Основные методы API — pushState(), replaceState() и событие popstate. Они позволяют динамически менять состояние страницы, обновляя URL, что делает навигацию в одностраничных приложениях (SPA) более плавной и интерактивной.

Question 2

Как работает this для прототипов объекта?

Accepted Answer

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

Question 3

Особенности стрелочных функций (this, arguments) и как изменить контекст?

Accepted Answer

Стрелочные функции не создают собственного контекста this и используют значение this из внешней функции. Они также не имеют объекта arguments, что делает их менее гибкими в некоторых ситуациях. Контекст стрелочной функции изменить нельзя, так как он жёстко привязан к внешней области видимости.

Question 4

Методы call, apply, bind — для чего они нужны?

Accepted Answer

Методы call и apply позволяют вызвать функцию с заданным значением this, но call передаёт аргументы через запятую, а apply — в виде массива. Метод bind возвращает новую функцию с фиксированным значением this, которая может быть вызвана позже. Эти методы полезны для контроля контекста выполнения функции, особенно при работе с методами объектов.

Question 5

Расскажите про this и контекст?

Accepted Answer

В JavaScript this — это ссылка на текущий контекст выполнения, который зависит от того, как вызвана функция. В методах объектов this ссылается на сам объект, а в обычных функциях — на глобальный объект или undefined в строгом режиме. Значение this может быть явно изменено с помощью методов call, apply и bind.

Question 6

Есть ли у стрелочной функции методы call, apply и bind?

Accepted Answer

Стрелочные функции могут использовать методы call, apply и bind, но эти методы не изменяют контекст this внутри стрелочной функции. В отличие от обычных функций, стрелочные функции наследуют значение this из своей внешней области видимости (лексический контекст), и методы call, apply и bind не могут его изменить.

Question 7

Для чего и как работает this в методах объекта?

Accepted Answer

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

Question 8

Что такое стрелочные функции и чем они отличаются от обычных функций?

Accepted Answer

Стрелочные функции — это сокращенная запись функций, которая не имеет своего контекста this. Они чаще всего используются для упрощения синтаксиса и не поддерживают некоторые особенности обычных функций, например, arguments и this. Эти функции удобны для написания короткого кода, но их нельзя использовать в ситуациях, где важен контекст.

Question 9

Расскажите про this и контекст

Accepted Answer

this в JavaScript — это ключевое слово, которое ссылается на текущий контекст выполнения. Контекст зависит от того, где и как используется this:В методе объекта this указывает на этот объект.В функции this по умолчанию указывает на глобальный объект (в строгом режиме — undefined).В стрелочных функциях this наследуется из внешнего контекста.Пример:const obj = {
	name: "Иван",
	greet() {
		console.log(`Привет, ${this.name}!`);
	},
};
obj.greet(); // Привет, Иван!

Question 10

В чем разница между display: none и visibility: hidden?

Accepted Answer

• display: none полностью удаляет элемент с веб-страницы, как если бы его не существовало. Он не занимает места в макете, и элементы после него сдвигаются, чтобы занять его пространство.• visibility: hidden скрывает элемент, но оставляет его место на странице. Элемент всё ещё занимает пространство в макете, но не виден пользователю.

Вопросы React Frontend Developer