Вопросы React Frontend Developer

this в JavaScript — это ключевое слово, которое ссылается на текущий контекст выполнения. Контекст зависит от того, где и как используется this:

• В методе объекта this указывает на этот объект.

• В функции this по умолчанию указывает на глобальный объект (в строгом режиме — undefined).

• В стрелочных функциях this наследуется из внешнего контекста.

Пример:

const obj = {
	name: "Иван",
	greet() {
		console.log(`Привет, ${this.name}!`);
	},
};
obj.greet(); // Привет, Иван!

Прототип — это объект, от которого другой объект может наследовать свойства и методы. В JavaScript каждый объект имеет скрытое свойство [[Prototype]], которое указывает на его прототип. Это позволяет организовать наследование, чтобы не дублировать код и переиспользовать общие методы. Например, если метод не найден в объекте, JavaScript ищет его в прототипе.

Пример:

const animal = { eats: true };
const dog = Object.create(animal);
console.log(dog.eats); // true

Делегирование событий — это подход, при котором событие обрабатывается на родительском элементе, а не на каждом дочернем элементе, к которому оно относится. Это работает благодаря всплытию событий: событие, вызванное на дочернем элементе, поднимается вверх по дереву DOM до родителя. Этот метод позволяет сократить количество обработчиков событий и упростить их управление.

Пример:

document.getElementById("parent").addEventListener("click", (event) => {
	if (event.target.tagName === "BUTTON") {
		console.log(`Нажата кнопка: ${event.target.textContent}`);
	}
});

<canvas> — это HTML-тег, который используется для рисования 2D и 3D графики через JavaScript. Сам по себе <canvas> не содержит графики; для её создания используется JavaScript API. Этот элемент полезен для анимаций, игр и динамического рендеринга изображений, но он требует программирования для каждой детали.

Тег <noscript> отображает содержимое, если у пользователя отключен JavaScript или его браузер не поддерживает скрипты. Это полезно для обеспечения доступности сайта для всех пользователей, включая тех, кто не может использовать JavaScript. Внутри <noscript> можно размещать альтернативные версии контента или инструкции для пользователей.

Data-атрибуты — это пользовательские атрибуты, начинающиеся с data-, которые позволяют хранить дополнительные данные в HTML-элементах. Эти данные могут быть использованы JavaScript для динамической обработки элементов на странице. Data-атрибуты удобны для передачи данных без необходимости изменения структуры HTML или использования скрытых полей.