Для чего нужен cors ?
Спросят с вероятностью 3%
CORS (Cross-Origin Resource Sharing) — это механизм безопасности, который позволяет ограничивать или разрешать доступ веб-ресурсов из одного домена к ресурсам на другом домене. Он был введен для решения проблем, связанных с политикой одного источника (Same-Origin Policy), которая предотвращает взаимодействие между ресурсами из разных источников, чтобы защитить данные от межсайтовых атак.
Основные задачи
1️⃣Обеспечение безопасности
✅CORS помогает предотвратить атаки, такие как XSS (Cross-Site Scripting) и CSRF (Cross-Site Request Forgery), ограничивая доступ к ресурсам на сервере только с доверенных доменов.
2️⃣Разрешение легитимного кросс-доменного обмена данными
✅CORS позволяет легитимным веб-приложениям запрашивать ресурсы с других доменов. Это важно для современных веб-приложений, которые часто взаимодействуют с API и ресурсами, размещенными на разных серверах.
Как он работает
Добавляет новые HTTP-заголовки, которые позволяют серверу сообщать браузеру, разрешено ли выполнение кросс-доменных запросов.
1️⃣HTTP-заголовки, используемые для CORS
✅
✅
✅
✅
✅
2️⃣Процесс CORS-запроса
Простой запрос (Simple Request)
✅Запросы с методами GET, HEAD или POST и с ограниченным набором безопасных заголовков считаются простыми и обрабатываются напрямую.
Предварительный запрос (Preflight Request)
✅Для методов, отличных от GET, HEAD и POST (или если используются нестандартные заголовки), браузер сначала отправляет "предварительный" запрос с методом OPTIONS. Этот запрос проверяет, разрешен ли кросс-доменный доступ.
✅Если сервер разрешает запрос, он отвечает с соответствующими заголовками CORS. Только после этого браузер отправляет основной запрос.
Пример простого запроса:
Запрос:
Ответ:
Пример предварительного запроса:
Предварительный запрос:
Ответ на предварительный запрос:
Основной запрос (если предварительный запрос успешен):
Ответ на основной запрос:
CORS (Cross-Origin Resource Sharing) — это механизм безопасности, который позволяет ограничивать или разрешать доступ веб-ресурсов из одного домена к ресурсам на другом домене. Он помогает защитить данные от межсайтовых атак и разрешает легитимные кросс-доменные запросы, обеспечивая взаимодействие между веб-приложениями и API, размещенными на разных серверах. CORS добавляет специальные HTTP-заголовки для управления доступом и может включать предварительные запросы для проверки разрешений.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 3%
CORS (Cross-Origin Resource Sharing) — это механизм безопасности, который позволяет ограничивать или разрешать доступ веб-ресурсов из одного домена к ресурсам на другом домене. Он был введен для решения проблем, связанных с политикой одного источника (Same-Origin Policy), которая предотвращает взаимодействие между ресурсами из разных источников, чтобы защитить данные от межсайтовых атак.
Основные задачи
1️⃣Обеспечение безопасности
✅CORS помогает предотвратить атаки, такие как XSS (Cross-Site Scripting) и CSRF (Cross-Site Request Forgery), ограничивая доступ к ресурсам на сервере только с доверенных доменов.
2️⃣Разрешение легитимного кросс-доменного обмена данными
✅CORS позволяет легитимным веб-приложениям запрашивать ресурсы с других доменов. Это важно для современных веб-приложений, которые часто взаимодействуют с API и ресурсами, размещенными на разных серверах.
Как он работает
Добавляет новые HTTP-заголовки, которые позволяют серверу сообщать браузеру, разрешено ли выполнение кросс-доменных запросов.
1️⃣HTTP-заголовки, используемые для CORS
✅
Access-Control-Allow-Origin
: Определяет, какие домены могут обращаться к ресурсам сервера.✅
Access-Control-Allow-Methods
: Определяет, какие HTTP-методы (например, GET, POST, PUT, DELETE) разрешены для кросс-доменных запросов.✅
Access-Control-Allow-Headers
: Определяет, какие заголовки могут быть использованы в кросс-доменных запросах.✅
Access-Control-Allow-Credentials
: Указывает, разрешено ли отправлять куки и авторизационные данные вместе с запросом.✅
Access-Control-Max-Age
: Указывает, как долго результаты проверки могут кэшироваться.2️⃣Процесс CORS-запроса
Простой запрос (Simple Request)
✅Запросы с методами GET, HEAD или POST и с ограниченным набором безопасных заголовков считаются простыми и обрабатываются напрямую.
Предварительный запрос (Preflight Request)
✅Для методов, отличных от GET, HEAD и POST (или если используются нестандартные заголовки), браузер сначала отправляет "предварительный" запрос с методом OPTIONS. Этот запрос проверяет, разрешен ли кросс-доменный доступ.
✅Если сервер разрешает запрос, он отвечает с соответствующими заголовками CORS. Только после этого браузер отправляет основной запрос.
Пример простого запроса:
Запрос:
GET /resource HTTP/1.1
Host: api.example.com
Origin: http://anotherdomain.com
Ответ:
HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://anotherdomain.com
Content-Type: application/json
{"message": "Success"}
Пример предварительного запроса:
Предварительный запрос:
OPTIONS /resource HTTP/1.1
Host: api.example.com
Origin: http://anotherdomain.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type
Ответ на предварительный запрос:
HTTP/1.1 204 No Content
Access-Control-Allow-Origin: http://anotherdomain.com
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: Content-Type
Access-Control-Max-Age: 86400
Основной запрос (если предварительный запрос успешен):
POST /resource HTTP/1.1
Host: api.example.com
Origin: http://anotherdomain.com
Content-Type: application/json
{"data": "Some data"}
Ответ на основной запрос:
HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://anotherdomain.com
Content-Type: application/json
{"message": "Data received"}
CORS (Cross-Origin Resource Sharing) — это механизм безопасности, который позволяет ограничивать или разрешать доступ веб-ресурсов из одного домена к ресурсам на другом домене. Он помогает защитить данные от межсайтовых атак и разрешает легитимные кросс-доменные запросы, обеспечивая взаимодействие между веб-приложениями и API, размещенными на разных серверах. CORS добавляет специальные HTTP-заголовки для управления доступом и может включать предварительные запросы для проверки разрешений.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Как id может участвовать в ссылке ?
Спросят с вероятностью 3%
Как это работает:
1️⃣ Установите атрибут
3️⃣ Когда пользователь кликает по такой ссылке, браузер автоматически прокручивает страницу до элемента с соответствующим id.
В этом примере, кликая на "Перейти к Секции 1" или "Перейти к Секции 2", пользователь будет направлен к соответствующему разделу на странице.
Дополнительные применения:
✅ Создание навигационного меню: Используется для быстрого доступа к разделам на одностраничных сайтах или длинных лендингах.
✅ Ссылки на заметки: Позволяет создавать внутренние ссылки в документах или статьях, упрощая навигацию по тексту.
Использование
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 3%
id
атрибут элемента может использоваться для создания якорных ссылок (anchor links), которые позволяют переходить к определённому разделу или элементу на странице. Это особенно полезно для навигации по длинным страницам, позволяя пользователям быстро перейти к интересующему их контенту без необходимости прокручивать страницу вручную.Как это работает:
1️⃣ Установите атрибут
id
для целевого элемента на странице. Должен быть уникальным в пределах страницы.<div id="section1">Это целевая секция</div>2️⃣ Создайте ссылку с атрибутом
href
, значение которого начинается с символа #
, за которым следует id
целевого элемента.Перейти к целевой секции
3️⃣ Когда пользователь кликает по такой ссылке, браузер автоматически прокручивает страницу до элемента с соответствующим id.
<!DOCTYPE html>
<html>
<head>
<title>Пример страницы с якорными ссылками</title>
</head>
<body>
<h2>Перейти к Секции 1</h2>
<h2>Перейти к Секции 2</h2>
<div style="height:600px;">
<p>Прокрутите вниз</p>
</div>
<h2 id="section1">Секция 1</h2>
<p>Некоторый контент...</p>
<div style="height:500px;">
<p>Прокрутите вниз</p>
</div>
<h2 id="section2">Секция 2</h2>
<p>Ещё некоторый контент...</p>
</body>
</html>
В этом примере, кликая на "Перейти к Секции 1" или "Перейти к Секции 2", пользователь будет направлен к соответствующему разделу на странице.
Дополнительные применения:
✅ Создание навигационного меню: Используется для быстрого доступа к разделам на одностраничных сайтах или длинных лендингах.
✅ Ссылки на заметки: Позволяет создавать внутренние ссылки в документах или статьях, упрощая навигацию по тексту.
Использование
id
в ссылках делает веб-страницы более удобными для пользователей, облегчая доступ к нужной информации и улучшая общий пользовательский опыт.👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.
🔐 База собесов | 🔐 База тестовых
Зачем нужны разные хештеги ?
Спросят с вероятностью 7%
Хештеги (#) в веб-разработке используются по-разному, в зависимости от контекста их применения. Во-первых, они могут использоваться в социальных сетях для группировки контента по определенным темам, что облегчает поиск информации. Во-вторых, в URL-адресах веб-страниц хештеги служат для навигации к определенной части страницы без перезагрузки (якорные ссылки).
1️⃣ Хештеги в социальных сетях:
(#пример) помогают пользователям находить сообщения и контент по определенным темам или интересам в социальных сетях. Когда вы добавляете хештег к своему посту, он автоматически становится кликабельным, и любой может кликнуть по нему, чтобы увидеть другие посты с ним же. Это способствует объединению контента по схожим интересам и упрощает поиск нужной информации.
2️⃣ Хештеги в URL (якорные ссылки):
В веб-разработке они используются в URL для навигации к определенному разделу или элементу на странице без перезагрузки страницы. Это называется якорная ссылка. Когда пользователь кликает по такой ссылке, браузер прокручивает страницу к элементу, который имеет соответствующий идентификатор (id).
В этом примере, когда пользователь кликает на ссылку "Перейти к разделу 1", страница прокручивается к
Разные хештеги нужны для организации и упрощения поиска контента в социальных сетях, а также для навигации по веб-страницам без перезагрузки, направляя пользователя к определенному разделу или элементу страницы. Это делает информацию более доступной и интерактивной.
Хештеги помогают нам быстро находить интересующую информацию в интернете и перемещаться по веб-страницам, не перезагружая их целиком.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 7%
Хештеги (#) в веб-разработке используются по-разному, в зависимости от контекста их применения. Во-первых, они могут использоваться в социальных сетях для группировки контента по определенным темам, что облегчает поиск информации. Во-вторых, в URL-адресах веб-страниц хештеги служат для навигации к определенной части страницы без перезагрузки (якорные ссылки).
1️⃣ Хештеги в социальных сетях:
(#пример) помогают пользователям находить сообщения и контент по определенным темам или интересам в социальных сетях. Когда вы добавляете хештег к своему посту, он автоматически становится кликабельным, и любой может кликнуть по нему, чтобы увидеть другие посты с ним же. Это способствует объединению контента по схожим интересам и упрощает поиск нужной информации.
#пример - делает ваш пост видимым для всех, кто ищет посты с этим хештегом.
2️⃣ Хештеги в URL (якорные ссылки):
В веб-разработке они используются в URL для навигации к определенному разделу или элементу на странице без перезагрузки страницы. Это называется якорная ссылка. Когда пользователь кликает по такой ссылке, браузер прокручивает страницу к элементу, который имеет соответствующий идентификатор (id).
Перейти к разделу 1
<div id="section1">Содержимое раздела 1</div>
В этом примере, когда пользователь кликает на ссылку "Перейти к разделу 1", страница прокручивается к
<div id="section1">
.Разные хештеги нужны для организации и упрощения поиска контента в социальных сетях, а также для навигации по веб-страницам без перезагрузки, направляя пользователя к определенному разделу или элементу страницы. Это делает информацию более доступной и интерактивной.
Хештеги помогают нам быстро находить интересующую информацию в интернете и перемещаться по веб-страницам, не перезагружая их целиком.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.
🔐 База собесов | 🔐 База тестовых
Зачем создавались библиотеки react и другие ?
Спросят с вероятностью 3%
Библиотеки и фреймворки, такие как React, Angular и Vue.js, были созданы для решения проблем и улучшения процессов разработки веб-приложений. Веб-разработка эволюционировала, и требования к производительности, масштабируемости, поддержке и интерактивности веб-приложений значительно возросли. Эти инструменты помогают разработчикам создавать более сложные, быстрые и поддерживаемые приложения. Рассмотрим основные причины создания таких библиотек и фреймворков:
1️⃣Управление состоянием и реактивность
React
Был создан для решения проблем управления состоянием и реактивности в пользовательских интерфейсах. Он предоставляет компонентный подход к построению UI и использует виртуальный DOM для оптимизации обновлений пользовательского интерфейса.
✅Компонентный подход: Разделение пользовательского интерфейса на переиспользуемые компоненты улучшает структуру кода и его поддерживаемость.
✅Виртуальный DOM: Минимизирует прямые обновления реального DOM, используя виртуальный DOM для вычисления необходимых изменений и оптимизации производительности.
2️⃣Обработка сложных данных и взаимодействий
Angular
Предоставляет комплексный фреймворк для построения крупных приложений с сложными взаимодействиями и управлением состоянием.
✅Двусторонняя привязка данных: Позволяет синхронизировать данные между моделью и представлением автоматически.
✅Встроенные инструменты и решения: Включает маршрутизацию, HTTP-клиент, формы и многое другое, что упрощает создание сложных приложений.
3️⃣Простота и гибкость
Vue.js
Созданный Эваном Ю (Evan You), стремится предоставить простой и гибкий инструмент для построения пользовательских интерфейсов, который легко интегрируется с существующими проектами.
✅Легкий в освоении: Имеет простую и интуитивно понятную структуру.
✅Реактивность: Предоставляет мощную систему реактивности, которая автоматически отслеживает изменения данных и обновляет представление.
4️⃣Повышение производительности
Современные библиотеки и фреймворки разработаны с учетом производительности. Они оптимизируют работу с DOM, минимизируют количество перерисовок и предлагают механизмы для эффективного управления состоянием и обработкой данных.
✅Виртуальный DOM (React): Обновления в DOM происходят только тогда, когда это необходимо, что снижает нагрузку на браузер.
✅Change Detection (Angular): Оптимизированный механизм обнаружения изменений позволяет эффективно обновлять представление.
Библиотеки и фреймворки, такие как React, Angular и Vue.js, были созданы для упрощения разработки сложных и интерактивных веб-приложений. Они решают проблемы управления состоянием, оптимизации производительности, модульности, улучшения процесса разработки и тестирования, а также предоставляют мощные инструменты и методологии для построения масштабируемых и поддерживаемых приложений.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 3%
Библиотеки и фреймворки, такие как React, Angular и Vue.js, были созданы для решения проблем и улучшения процессов разработки веб-приложений. Веб-разработка эволюционировала, и требования к производительности, масштабируемости, поддержке и интерактивности веб-приложений значительно возросли. Эти инструменты помогают разработчикам создавать более сложные, быстрые и поддерживаемые приложения. Рассмотрим основные причины создания таких библиотек и фреймворков:
1️⃣Управление состоянием и реактивность
React
Был создан для решения проблем управления состоянием и реактивности в пользовательских интерфейсах. Он предоставляет компонентный подход к построению UI и использует виртуальный DOM для оптимизации обновлений пользовательского интерфейса.
✅Компонентный подход: Разделение пользовательского интерфейса на переиспользуемые компоненты улучшает структуру кода и его поддерживаемость.
✅Виртуальный DOM: Минимизирует прямые обновления реального DOM, используя виртуальный DOM для вычисления необходимых изменений и оптимизации производительности.
// Пример компонента React
import React from 'react';
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
export default Greeting;
2️⃣Обработка сложных данных и взаимодействий
Angular
Предоставляет комплексный фреймворк для построения крупных приложений с сложными взаимодействиями и управлением состоянием.
✅Двусторонняя привязка данных: Позволяет синхронизировать данные между моделью и представлением автоматически.
✅Встроенные инструменты и решения: Включает маршрутизацию, HTTP-клиент, формы и многое другое, что упрощает создание сложных приложений.
// Пример компонента Angular
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<h1>Hello, {{ name }}!</h1>`,
})
export class AppComponent {
name = 'World';
}
3️⃣Простота и гибкость
Vue.js
Созданный Эваном Ю (Evan You), стремится предоставить простой и гибкий инструмент для построения пользовательских интерфейсов, который легко интегрируется с существующими проектами.
✅Легкий в освоении: Имеет простую и интуитивно понятную структуру.
✅Реактивность: Предоставляет мощную систему реактивности, которая автоматически отслеживает изменения данных и обновляет представление.
// Пример компонента Vue.js
<template>
<h1>Hello, {{ name }}!</h1>
</template>
<script>
export default {
data() {
return {
name: 'World',
};
},
};
</script>
4️⃣Повышение производительности
Современные библиотеки и фреймворки разработаны с учетом производительности. Они оптимизируют работу с DOM, минимизируют количество перерисовок и предлагают механизмы для эффективного управления состоянием и обработкой данных.
✅Виртуальный DOM (React): Обновления в DOM происходят только тогда, когда это необходимо, что снижает нагрузку на браузер.
✅Change Detection (Angular): Оптимизированный механизм обнаружения изменений позволяет эффективно обновлять представление.
Библиотеки и фреймворки, такие как React, Angular и Vue.js, были созданы для упрощения разработки сложных и интерактивных веб-приложений. Они решают проблемы управления состоянием, оптимизации производительности, модульности, улучшения процесса разработки и тестирования, а также предоставляют мощные инструменты и методологии для построения масштабируемых и поддерживаемых приложений.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Как работает react ?
Спросят с вероятностью 7%
React — это библиотека для создания пользовательских интерфейсов. Она позволяет строить сложные, интерактивные UI из маленьких, изолированных частей кода, называемых компонентами. Он основывается на нескольких ключевых концепциях, которые обеспечивают его эффективность и гибкость.
1️⃣ Компонентный подход: Приложения состоят из компонентов. Компонент — это кусочек пользовательского интерфейса, который можно использовать повторно. Каждый компонент имеет своё состояние и пропсы (параметры, которые передаются от родительского компонента), что делает его независимым и способным к самостоятельной работе.
2️⃣ JSX: Использует JSX — синтаксис, похожий на HTML, для описания структуры интерфейса. Он делает код компонентов более читабельным и упрощает процесс их создания.
3️⃣ Виртуальный DOM: Одной из главных особенностей является использование виртуального DOM — лёгкой копии реального DOM. Это позволяет React оптимизировать обновления интерфейса, сначала применяя изменения к виртуальному DOM, а затем, после вычисления наиболее эффективных изменений, к реальному DOM. Это существенно повышает производительность, особенно при работе с большими объёмами данных.
4️⃣ Однонаправленный поток данных: Данные течут строго от родителей к детям через пропсы, что упрощает отладку и понимание приложений, так как знаешь, откуда пришли данные и как они изменяются.
5️⃣ Хуки: С появлением хуков он стал ещё более мощным и гибким. Хуки позволяют использовать состояние и другие его возможности без написания классов. Например, хук
React предлагает мощный набор инструментов для быстрой и эффективной разработки интерактивных пользовательских интерфейсов. Он позволяет разрабатывать компоненты независимо, управлять их состоянием и пропсами, а также эффективно обновлять интерфейс, минимизируя взаимодействие с реальным DOM.
React помогает создавать веб-страницы, которые быстро реагируют на действия пользователя, делая взаимодействие с сайтом плавным и приятным, не перезагружая страницу при каждом действии.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 7%
React — это библиотека для создания пользовательских интерфейсов. Она позволяет строить сложные, интерактивные UI из маленьких, изолированных частей кода, называемых компонентами. Он основывается на нескольких ключевых концепциях, которые обеспечивают его эффективность и гибкость.
1️⃣ Компонентный подход: Приложения состоят из компонентов. Компонент — это кусочек пользовательского интерфейса, который можно использовать повторно. Каждый компонент имеет своё состояние и пропсы (параметры, которые передаются от родительского компонента), что делает его независимым и способным к самостоятельной работе.
2️⃣ JSX: Использует JSX — синтаксис, похожий на HTML, для описания структуры интерфейса. Он делает код компонентов более читабельным и упрощает процесс их создания.
function App() {
return <div>Привет, мир!</div>;
}
3️⃣ Виртуальный DOM: Одной из главных особенностей является использование виртуального DOM — лёгкой копии реального DOM. Это позволяет React оптимизировать обновления интерфейса, сначала применяя изменения к виртуальному DOM, а затем, после вычисления наиболее эффективных изменений, к реальному DOM. Это существенно повышает производительность, особенно при работе с большими объёмами данных.
4️⃣ Однонаправленный поток данных: Данные течут строго от родителей к детям через пропсы, что упрощает отладку и понимание приложений, так как знаешь, откуда пришли данные и как они изменяются.
5️⃣ Хуки: С появлением хуков он стал ещё более мощным и гибким. Хуки позволяют использовать состояние и другие его возможности без написания классов. Например, хук
useState
позволяет добавить состояние к функциональному компоненту.import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Вы кликнули {count} раз</p>
<button onClick={() => setCount(count + 1)}>
Нажми на меня
</button>
</div>
);
}
React предлагает мощный набор инструментов для быстрой и эффективной разработки интерактивных пользовательских интерфейсов. Он позволяет разрабатывать компоненты независимо, управлять их состоянием и пропсами, а также эффективно обновлять интерфейс, минимизируя взаимодействие с реальным DOM.
React помогает создавать веб-страницы, которые быстро реагируют на действия пользователя, делая взаимодействие с сайтом плавным и приятным, не перезагружая страницу при каждом действии.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.
🔐 База собесов | 🔐 База тестовых
Какую проблему решает асинхронность в js ?
Спросят с вероятностью 3%
Асинхронность решает проблему блокировки основной нити выполнения (main thread) при выполнении длительных операций. Основная нить выполнения отвечает за обработку пользовательского интерфейса, а также за выполнение кода. Если длительные операции, такие как сетевые запросы, таймеры или ввод/вывод, выполняются синхронно, они могут блокировать пользовательский интерфейс, делая приложение неотзывчивым и неудобным для пользователя. Асинхронность позволяет выполнять такие операции параллельно, не блокируя основную нить.
Основные проблемы
1️⃣Блокировка пользовательского интерфейса (UI)
✅Синхронные операции, такие как загрузка данных из сети, чтение файлов или выполнение сложных вычислений, могут блокировать основной поток, замораживая интерфейс и делая приложение неотзывчивым.
✅Асинхронные операции позволяют избежать этой блокировки, выполняя задачи в фоновом режиме и возвращаясь к основному потоку, когда результаты готовы.
2️⃣Параллельное выполнение задач
✅Асинхронные операции позволяют выполнять несколько задач параллельно, что повышает производительность и эффективность приложения.
✅Например, загрузка нескольких ресурсов (изображений, скриптов, стилей) одновременно может значительно ускорить время загрузки страницы.
3️⃣Обработка событий и таймеров
✅Асинхронные функции, такие как
✅Это полезно для выполнения задач по расписанию, создания анимаций, обработки пользовательских событий и многого другого.
4️⃣Работа с I/O (ввод/вывод)
✅Асинхронные операции ввода/вывода позволяют эффективно обрабатывать задачи чтения и записи данных, например, при работе с файлами или базами данных.
✅Это важно для серверных приложений, обрабатывающих множество одновременных запросов без блокировки.
Основные механизмы
1️⃣Коллбэки (Callbacks)
✅Функции обратного вызова, которые вызываются по завершении асинхронной операции.
Асинхронность решает проблему блокировки основной нити выполнения при выполнении длительных операций, таких как сетевые запросы, таймеры и операции ввода/вывода. Она позволяет выполнять эти задачи параллельно, не блокируя пользовательский интерфейс и обеспечивая более отзывчивое и эффективное поведение приложений. Асинхронность реализуется с помощью коллбэков, промисов и синтаксиса async/await.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 3%
Асинхронность решает проблему блокировки основной нити выполнения (main thread) при выполнении длительных операций. Основная нить выполнения отвечает за обработку пользовательского интерфейса, а также за выполнение кода. Если длительные операции, такие как сетевые запросы, таймеры или ввод/вывод, выполняются синхронно, они могут блокировать пользовательский интерфейс, делая приложение неотзывчивым и неудобным для пользователя. Асинхронность позволяет выполнять такие операции параллельно, не блокируя основную нить.
Основные проблемы
1️⃣Блокировка пользовательского интерфейса (UI)
✅Синхронные операции, такие как загрузка данных из сети, чтение файлов или выполнение сложных вычислений, могут блокировать основной поток, замораживая интерфейс и делая приложение неотзывчивым.
✅Асинхронные операции позволяют избежать этой блокировки, выполняя задачи в фоновом режиме и возвращаясь к основному потоку, когда результаты готовы.
function fetchData() {
const request = new XMLHttpRequest();
request.open('GET', 'https://api.example.com/data', false); // false для синхронного запроса
request.send();
if (request.status === 200) {
console.log(request.responseText);
}
}
fetchData();
console.log('Этот код выполнится только после завершения fetchData');
2️⃣Параллельное выполнение задач
✅Асинхронные операции позволяют выполнять несколько задач параллельно, что повышает производительность и эффективность приложения.
✅Например, загрузка нескольких ресурсов (изображений, скриптов, стилей) одновременно может значительно ускорить время загрузки страницы.
const urls = [
'https://api.example.com/data1',
'https://api.example.com/data2',
'https://api.example.com/data3'
];
Promise.all(urls.map(url => fetch(url).then(response => response.json())))
.then(results => {
console.log('All data fetched:', results);
})
.catch(error => console.error('Error fetching data:', error));
3️⃣Обработка событий и таймеров
✅Асинхронные функции, такие как
setTimeout
и setInterval
, позволяют выполнять задачи с задержкой или периодически, не блокируя основной поток.✅Это полезно для выполнения задач по расписанию, создания анимаций, обработки пользовательских событий и многого другого.
console.log('Start');
setTimeout(() => {
console.log('Executed after 2 seconds');
}, 2000);
console.log('End');
4️⃣Работа с I/O (ввод/вывод)
✅Асинхронные операции ввода/вывода позволяют эффективно обрабатывать задачи чтения и записи данных, например, при работе с файлами или базами данных.
✅Это важно для серверных приложений, обрабатывающих множество одновременных запросов без блокировки.
const fs = require('fs');
fs.readFile('example.txt', 'utf8', (err, data) => {
if (err) {
console.error('Error reading file:', err);
return;
}
console.log('File content:', data);
});
console.log('This code runs while the file is being read');
Основные механизмы
1️⃣Коллбэки (Callbacks)
✅Функции обратного вызова, которые вызываются по завершении асинхронной операции.
function fetchData(callback) {
setTimeout(() => {
const data = 'Some data';
callback(data);
}, 1000);
}
fetchData(data => {
console.log('Data received:', data);
});
Асинхронность решает проблему блокировки основной нити выполнения при выполнении длительных операций, таких как сетевые запросы, таймеры и операции ввода/вывода. Она позволяет выполнять эти задачи параллельно, не блокируя пользовательский интерфейс и обеспечивая более отзывчивое и эффективное поведение приложений. Асинхронность реализуется с помощью коллбэков, промисов и синтаксиса async/await.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Что такое solid ?
Спросят с вероятностью 7%
Принципы SOLID — это набор из пяти принципов ООП, которые помогают разработчикам создавать более понятный, гибкий и поддерживаемый код. Эти принципы были популяризированы Робертом Мартином (Robert C. Martin), также известным как "дядя Боб". Вот что обозначает каждый принцип:
1️⃣Single Responsibility Principle (Принцип единственной ответственности):
✅Каждый класс должен иметь одну и только одну причину для изменения, то есть одну ответственность.
✅Это помогает сделать код более понятным и облегчает его поддержку, так как каждая часть кода отвечает только за одну конкретную задачу.
2️⃣Open/Closed Principle (Принцип открытости/закрытости):
✅Программные сущности (классы, модули, функции) должны быть открыты для расширения, но закрыты для модификации.
✅Это означает, что мы должны иметь возможность добавлять новый функционал без изменения существующего кода.
3️⃣Liskov Substitution Principle (Принцип подстановки Барбары Лисков):
✅Объекты в программе должны быть заменяемы экземплярами их подклассов без изменения правильности выполнения программы.
✅То есть, подклассы должны дополнять, а не изменять поведение базового класса.
Принципы SOLID помогают писать код, который легко поддерживать и расширять. Это набор правил, которые говорят о том, как разделять обязанности между классами, как правильно наследовать и как строить интерфейсы и зависимости.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 7%
Принципы SOLID — это набор из пяти принципов ООП, которые помогают разработчикам создавать более понятный, гибкий и поддерживаемый код. Эти принципы были популяризированы Робертом Мартином (Robert C. Martin), также известным как "дядя Боб". Вот что обозначает каждый принцип:
1️⃣Single Responsibility Principle (Принцип единственной ответственности):
✅Каждый класс должен иметь одну и только одну причину для изменения, то есть одну ответственность.
✅Это помогает сделать код более понятным и облегчает его поддержку, так как каждая часть кода отвечает только за одну конкретную задачу.
// Пример плохого кода
class User {
void saveToDatabase() {
// сохраняет пользователя в базу данных
}
void sendEmail() {
// отправляет приветственное письмо пользователю
}
}
// Пример хорошего кода
class UserRepository {
void save(User user) {
// сохраняет пользователя в базу данных
}
}
class EmailService {
void sendWelcomeEmail(User user) {
// отправляет приветственное письмо пользователю
}
}
2️⃣Open/Closed Principle (Принцип открытости/закрытости):
✅Программные сущности (классы, модули, функции) должны быть открыты для расширения, но закрыты для модификации.
✅Это означает, что мы должны иметь возможность добавлять новый функционал без изменения существующего кода.
// Пример плохого кода
class Rectangle {
void draw() {
// рисует прямоугольник
}
}
class Circle {
void draw() {
// рисует круг
}
}
class GraphicEditor {
void drawShape(Object shape) {
if (shape instanceof Rectangle) {
((Rectangle) shape).draw();
} else if (shape instanceof Circle) {
((Circle) shape).draw();
}
}
}
// Пример хорошего кода
interface Shape {
void draw();
}
class Rectangle implements Shape {
public void draw() {
// рисует прямоугольник
}
}
class Circle implements Shape {
public void draw() {
// рисует круг
}
}
class GraphicEditor {
void drawShape(Shape shape) {
shape.draw();
}
}
3️⃣Liskov Substitution Principle (Принцип подстановки Барбары Лисков):
✅Объекты в программе должны быть заменяемы экземплярами их подклассов без изменения правильности выполнения программы.
✅То есть, подклассы должны дополнять, а не изменять поведение базового класса.
// Пример плохого кода
class Bird {
void fly() {}
}
class Ostrich extends Bird {
void fly() {
throw new UnsupportedOperationException();
}
}
// Пример хорошего кода
class Bird {}
class FlyingBird extends Bird {
void fly() {}
}
class Ostrich extends Bird {}
class Sparrow extends FlyingBird {
void fly() {
// реализация полета для воробья
}
}
Принципы SOLID помогают писать код, который легко поддерживать и расширять. Это набор правил, которые говорят о том, как разделять обязанности между классами, как правильно наследовать и как строить интерфейсы и зависимости.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Что такое стек вызовов ?
Спросят с вероятностью 3%
Стек вызовов (call stack) — это структура данных, используемая для управления вызовами функций в программах. В контексте выполнения, стек вызовов помогает интерпретатору отслеживать, какая функция выполняется в данный момент, какие функции вызвали текущую функцию и какие функции будут вызваны далее.
Как он работает
1️⃣Добавление вызова функции в стек (Push):
✅Когда вызывается новая функция, она добавляется в верхнюю часть стека вызовов. Этот процесс называется "push".
2️⃣Удаление вызова функции из стека (Pop):
✅Когда функция завершает свое выполнение, она удаляется из верхней части стека вызовов. Этот процесс называется "pop".
3️⃣Последовательность выполнения:
✅Стек вызовов работает по принципу LIFO (Last In, First Out), что означает, что последняя добавленная функция будет завершена первой.
Рассмотрим простой пример с несколькими вложенными вызовами функций:
👨💻 Пошаговое выполнение и изменения в стеке вызовов
1️⃣ Вызов `firstFunction`:
Стек вызовов:
Вывод:
2️⃣ Вызов stack) — это струизо такое стек вызо
Стек вызовов:
Вывод:
3️⃣ Вызов
Стек вызовов:
Вывод:
Вывод:
4️⃣ Завершение
✅Стек вызовов:
✅Вывод:
5️⃣Завершение
✅Стек вызовов:
✅Вывод:
6️⃣Завершениеck) — это структу
✅Стек вызовов:
✅Все функции завершены.
😎 Важные моменты
1️⃣Переполнение стека (Stack Overflow):
✅Если функция вызывает саму себя бесконечно (рекурсия без базового случая), стек вызовов будет заполняться до тех пор, пока не закончится память, выделенная для стека. Это приведет к ошибке переполнения стека (stack overflow).
2️⃣Асинхронные вызовы:
✅Не блокируют основной поток выполнения и не добавляются в стек вызовов. Вместо этого они управляются очередью задач (task queue) и циклом событий (event loop).
Стек вызовов — это структура данных, которая управляет вызовами функций в JavaScript. Он работает по принципу LIFO (Last In, First Out), добавляя вызовы функций в верхнюю часть стека и удаляя их по завершении. Это помогает отслеживать последовательность выполнения функций и управлять текущим состоянием программы.
🪙 1429 вопроса на Frontend разработчика.
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 3%
Стек вызовов (call stack) — это структура данных, используемая для управления вызовами функций в программах. В контексте выполнения, стек вызовов помогает интерпретатору отслеживать, какая функция выполняется в данный момент, какие функции вызвали текущую функцию и какие функции будут вызваны далее.
Как он работает
1️⃣Добавление вызова функции в стек (Push):
✅Когда вызывается новая функция, она добавляется в верхнюю часть стека вызовов. Этот процесс называется "push".
2️⃣Удаление вызова функции из стека (Pop):
✅Когда функция завершает свое выполнение, она удаляется из верхней части стека вызовов. Этот процесс называется "pop".
3️⃣Последовательность выполнения:
✅Стек вызовов работает по принципу LIFO (Last In, First Out), что означает, что последняя добавленная функция будет завершена первой.
Рассмотрим простой пример с несколькими вложенными вызовами функций:
function firstFunction() {
console.log('Начало firstFunction');
secondFunction();
console.log('Конец firstFunction');
}
function secondFunction() {
console.log('Начало secondFunction');
thirdFunction();
console.log('Конец secondFunction');
}
function thirdFunction() {
console.log('Начало thirdFunction');
// Третья функция не вызывает других функций
console.log('Конец thirdFunction');
}
firstFunction();
Стек вызовов:
[firstFunction]
Вывод:
Начало firstFunction
Стек вызовов:
[firstFunction, secondFunction]
Вывод:
Начало secondFunction
thirdFunction
изо такое стек вызовСтек вызовов:
[firstFunction, secondFunction, thirdFunction]
Вывод:
Начало thirdFunction
Вывод:
Конец thirdFunction
thirdFunction:
✅Стек вызовов:
[firstFunction, secondFunction]
✅Вывод:
Конец secondFunction
5️⃣Завершение
secondFunction:
✅Стек вызовов:
[firstFunction]
✅Вывод:
Конец firstFunction
6️⃣Завершениеck) — это структу
✅Стек вызовов:
[]
✅Все функции завершены.
1️⃣Переполнение стека (Stack Overflow):
✅Если функция вызывает саму себя бесконечно (рекурсия без базового случая), стек вызовов будет заполняться до тех пор, пока не закончится память, выделенная для стека. Это приведет к ошибке переполнения стека (stack overflow).
function recursiveFunction() {
recursiveFunction();
}
recursiveFunction(); // Это вызовет ошибку переполнения стека
2️⃣Асинхронные вызовы:
✅Не блокируют основной поток выполнения и не добавляются в стек вызовов. Вместо этого они управляются очередью задач (task queue) и циклом событий (event loop).
function asyncFunction() {
console.log('Начало asyncFunction');
setTimeout(() => {
console.log('Выполнение асинхронной задачи');
}, 1000);
console.log('Конец asyncFunction');
}
asyncFunction();
// Вывод:
// Начало asyncFunction
// Конец asyncFunction
// Выполнение асинхронной задачи (через 1 секунду)
Стек вызовов — это структура данных, которая управляет вызовами функций в JavaScript. Он работает по принципу LIFO (Last In, First Out), добавляя вызовы функций в верхнюю часть стека и удаляя их по завершении. Это помогает отслеживать последовательность выполнения функций и управлять текущим состоянием программы.
🔐 База собесов | 🔐 База тестовых
Please open Telegram to view this post
VIEW IN TELEGRAM
Как работает браузер ?
Спросят с вероятностью 7%
Работа браузера включает несколько этапов, чтобы отобразить веб-страницу. Давайте разберем их по порядку:
1️⃣Запрос ресурса:
✅Когда пользователь вводит URL в адресную строку и нажимает Enter, браузер начинает с определения адреса ресурса. Если это URL-адрес, начинающийся с
2️⃣DNS-разрешение:
✅Браузер преобразует доменное имя (например,
3️⃣Установка соединения:
✅Браузер устанавливает TCP-соединение с сервером, а если используется
4️⃣Отправка HTTP-запроса:
✅Браузер отправляет HTTP-запрос к серверу, чтобы получить содержимое веб-страницы.
5️⃣Получение HTTP-ответа:
✅Сервер отвечает с кодом состояния (например, 200 OK) и возвращает HTML-документ.
6️⃣Разбор (парсинг) HTML:
✅Браузер начинает разбор HTML-документа. Он создает DOM (Document Object Model) — иерархическую структуру узлов, представляющую содержимое страницы.
7️⃣Обработка CSS:
✅Браузер обрабатывает CSS-стили. Он загружает CSS-файлы и применяет стили к соответствующим элементам DOM, создавая CSSOM (CSS Object Model).
8️⃣Построение рендер-дерева:
✅DOM и CSSOM объединяются для создания рендер-дерева. Рендер-дерево представляет собой структуру, содержащую визуальные элементы, которые должны быть отображены на странице.
9️⃣Визуализация (рендеринг):
✅Браузер вычисляет положение каждого элемента на экране (расчет компоновки) и рисует их (отрисовка).
🔟Обработка JavaScript:
✅Браузер загружает и выполняет JavaScript-код. Если скрипт модифицирует DOM или CSSOM, процесс может повториться с повторным расчетом и перерисовкой.
1️⃣1️⃣Асинхронные операции:
✅Браузер обрабатывает асинхронные операции, такие как AJAX-запросы и таймеры, что может также вызвать повторное обновление страницы.
Весь этот процесс происходит быстро и незаметно для пользователя, предоставляя ему готовую к взаимодействию веб-страницу.
Браузер запрашивает у сервера веб-страницу, получает HTML, CSS и JavaScript, строит и отображает страницу на экране, обрабатывая взаимодействия пользователя и изменения в реальном времени.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 7%
Работа браузера включает несколько этапов, чтобы отобразить веб-страницу. Давайте разберем их по порядку:
1️⃣Запрос ресурса:
✅Когда пользователь вводит URL в адресную строку и нажимает Enter, браузер начинает с определения адреса ресурса. Если это URL-адрес, начинающийся с
http://
или https://
, браузер отправляет запрос на сервер.GET /index.html HTTP/1.1
Host: example.com
2️⃣DNS-разрешение:
✅Браузер преобразует доменное имя (например,
example.com
) в IP-адрес с помощью DNS-сервера.3️⃣Установка соединения:
✅Браузер устанавливает TCP-соединение с сервером, а если используется
https
, то устанавливает также SSL/TLS-соединение для безопасной передачи данных.4️⃣Отправка HTTP-запроса:
✅Браузер отправляет HTTP-запрос к серверу, чтобы получить содержимое веб-страницы.
GET /index.html HTTP/1.1
Host: example.com
5️⃣Получение HTTP-ответа:
✅Сервер отвечает с кодом состояния (например, 200 OK) и возвращает HTML-документ.
HTTP/1.1 200 OK
Content-Type: text/html
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
6️⃣Разбор (парсинг) HTML:
✅Браузер начинает разбор HTML-документа. Он создает DOM (Document Object Model) — иерархическую структуру узлов, представляющую содержимое страницы.
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
7️⃣Обработка CSS:
✅Браузер обрабатывает CSS-стили. Он загружает CSS-файлы и применяет стили к соответствующим элементам DOM, создавая CSSOM (CSS Object Model).
h1 {
color: blue;
}
8️⃣Построение рендер-дерева:
✅DOM и CSSOM объединяются для создания рендер-дерева. Рендер-дерево представляет собой структуру, содержащую визуальные элементы, которые должны быть отображены на странице.
9️⃣Визуализация (рендеринг):
✅Браузер вычисляет положение каждого элемента на экране (расчет компоновки) и рисует их (отрисовка).
🔟Обработка JavaScript:
✅Браузер загружает и выполняет JavaScript-код. Если скрипт модифицирует DOM или CSSOM, процесс может повториться с повторным расчетом и перерисовкой.
document.querySelector('h1').textContent = 'Hello, JavaScript!';
1️⃣1️⃣Асинхронные операции:
✅Браузер обрабатывает асинхронные операции, такие как AJAX-запросы и таймеры, что может также вызвать повторное обновление страницы.
Весь этот процесс происходит быстро и незаметно для пользователя, предоставляя ему готовую к взаимодействию веб-страницу.
Браузер запрашивает у сервера веб-страницу, получает HTML, CSS и JavaScript, строит и отображает страницу на экране, обрабатывая взаимодействия пользователя и изменения в реальном времени.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
В чём разница между видами замыкания ?
Спросят с вероятностью 3%
Замыкание (closure) — это функция, которая имеет доступ к переменным из своей внешней области видимости даже после завершения выполнения этой внешней функции. Однако, замыкания могут принимать разные формы в зависимости от их использования и контекста. Рассмотрим различные виды замыканий и их особенности.
Виды
1️⃣ Простое замыкание
Возникает, когда внутренняя функция имеет доступ к переменным внешней функции.
Здесь
2️⃣Замыкание с доступом к аргументам внешней функции
Внутренняя функция может также замыкаться на аргументах внешней функции.
Здесь функция, возвращаемая
3️⃣Инкапсуляция данных
Часто используются для инкапсуляции данных, скрывая переменные и предоставляя доступ к ним только через функции.
В этом примере переменная
4️⃣Частично применённые функции
Можно использовать для создания частично применённых функций, которые фиксируют некоторые аргументы.
Здесь функция
5️⃣Фабрика функций
Позволяют создавать функции, которые генерируют другие функции с определённым поведением.
Здесь
6️⃣Асинхронные замыкания
Играют ключевую роль в асинхронном программировании, так как позволяют сохранять контекст между асинхронными вызовами.
В этом примере замыкание сохраняет переменную
7️⃣Рекурсивные замыкания
Могут быть использованы для создания рекурсивных функций, которые запоминают контекст и могут вызывать себя.
Здесь
Замыкания (closures) — это функции, которые "запоминают" контекст, в котором они были созданы. Они могут использоваться для сохранения состояния, инкапсуляции данных, создания частично применённых функций, фабрики функций, работы с асинхронным кодом и рекурсией. Эти особенности делают замыкания мощным инструментом для управления данными и логикой.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 3%
Замыкание (closure) — это функция, которая имеет доступ к переменным из своей внешней области видимости даже после завершения выполнения этой внешней функции. Однако, замыкания могут принимать разные формы в зависимости от их использования и контекста. Рассмотрим различные виды замыканий и их особенности.
Виды
Возникает, когда внутренняя функция имеет доступ к переменным внешней функции.
function outerFunction() {
let outerVariable = 'I am outside!';
function innerFunction() {
console.log(outerVariable);
}
return innerFunction;
}
const inner = outerFunction();
inner(); // 'I am outside!'
Здесь
innerFunction
замыкается на переменной outerVariable
из внешней функции outerFunction
.2️⃣Замыкание с доступом к аргументам внешней функции
Внутренняя функция может также замыкаться на аргументах внешней функции.
function greet(greeting) {
return function(name) {
console.log(`${greeting}, ${name}!`);
};
}
const sayHello = greet('Hello');
sayHello('Alice'); // 'Hello, Alice!'
Здесь функция, возвращаемая
greet
, замыкается на аргументе greeting
.3️⃣Инкапсуляция данных
Часто используются для инкапсуляции данных, скрывая переменные и предоставляя доступ к ним только через функции.
function createCounter() {
let count = 0;
return {
increment: function() {
count++;
},
getCount: function() {
return count;
}
};
}
const counter = createCounter();
counter.increment();
console.log(counter.getCount()); // 1
В этом примере переменная
count
инкапсулирована и доступна только через методы increment
и getCount
.4️⃣Частично применённые функции
Можно использовать для создания частично применённых функций, которые фиксируют некоторые аргументы.
function multiply(a) {
return function(b) {
return a * b;
};
}
const double = multiply(2);
console.log(double(5)); // 10
Здесь функция
multiply
создаёт частично применённую функцию, фиксируя аргумент a
.5️⃣Фабрика функций
Позволяют создавать функции, которые генерируют другие функции с определённым поведением.
function createGreeter(greeting) {
return function(name) {
console.log(`${greeting}, ${name}!`);
};
}
const helloGreeter = createGreeter('Hello');
helloGreeter('Bob'); // 'Hello, Bob!'
const hiGreeter = createGreeter('Hi');
hiGreeter('Charlie'); // 'Hi, Charlie!'
Здесь
createGreeter
создаёт новые функции для различных приветствий.6️⃣Асинхронные замыкания
Играют ключевую роль в асинхронном программировании, так как позволяют сохранять контекст между асинхронными вызовами.
function fetchData(url) {
let data = null;
setTimeout(() => {
data = 'Data from ' + url;
console.log(data); // 'Data from example.com'
}, 1000);
return function() {
return data;
};
}
const getData = fetchData('example.com');
setTimeout(() => {
console.log(getData()); // 'Data from example.com'
}, 1500);
В этом примере замыкание сохраняет переменную
data
и позволяет к ней доступ после асинхронной операции.7️⃣Рекурсивные замыкания
Могут быть использованы для создания рекурсивных функций, которые запоминают контекст и могут вызывать себя.
function createFactorial() {
return function factorial(n) {
if (n <= 1) {
return 1;
}
return n * factorial(n - 1);
};
}
const factorial = createFactorial();
console.log(factorial(5)); // 120
Здесь
factorial
замыкается на самой себе, что позволяет реализовать рекурсивное вычисление факториала.Замыкания (closures) — это функции, которые "запоминают" контекст, в котором они были созданы. Они могут использоваться для сохранения состояния, инкапсуляции данных, создания частично применённых функций, фабрики функций, работы с асинхронным кодом и рекурсией. Эти особенности делают замыкания мощным инструментом для управления данными и логикой.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Please open Telegram to view this post
VIEW IN TELEGRAM
Что такое селектор ?
Спросят с вероятностью 7%
Селектор — это шаблон, который используется для выбора элементов HTML на веб-странице, к которым будут применяться стили. Селекторы позволяют разработчикам точно указывать, какие элементы должны быть стилизованы, используя различные критерии.
Вот основные типы селекторов и их примеры:
1️⃣Селекторы по тегу:
✅Выбирает все элементы с определённым тегом.
2️⃣Селекторы по классу:
✅Выбирает элементы с определённым классом. Класс указывается с помощью точки
3️⃣Селекторы по идентификатору (ID):
✅Выбирает элемент с определённым идентификатором. Идентификатор указывается с помощью решётки
✅Выбирает элемент с определённым идентификатором. Идентификатор указывается с помощью решётки
4️⃣Комбинированные селекторы:
✅Позволяют выбирать элементы, используя комбинацию различных критериев.
✅Селекторы потомков: выбирают элементы, которые находятся внутри другого элемента.
✅Селекторы дочерних элементов: выбирают элементы, которые являются дочерними для другого элемента.
✅Смежные селекторы: выбирают элементы, которые следуют непосредственно за другим элементом.
✅Селекторы по атрибуту: выбирают элементы с определённым атрибутом.
5️⃣Псевдоклассы:
✅Позволяют выбирать элементы в определённом состоянии.
6️⃣Псевдоэлементы:
✅Позволяют стилизовать определённые части элементов.
Примеры:
Селектор — это шаблон, который выбирает элементы HTML для применения стилей. Существуют разные типы селекторов, такие как по тегу, классу, ID, а также комбинированные селекторы, псевдоклассы и псевдоэлементы.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 7%
Селектор — это шаблон, который используется для выбора элементов HTML на веб-странице, к которым будут применяться стили. Селекторы позволяют разработчикам точно указывать, какие элементы должны быть стилизованы, используя различные критерии.
Вот основные типы селекторов и их примеры:
1️⃣Селекторы по тегу:
✅Выбирает все элементы с определённым тегом.
p {
color: blue;
}
2️⃣Селекторы по классу:
✅Выбирает элементы с определённым классом. Класс указывается с помощью точки
.
..example {
font-size: 16px;
}
3️⃣Селекторы по идентификатору (ID):
✅Выбирает элемент с определённым идентификатором. Идентификатор указывается с помощью решётки
#
.✅Выбирает элемент с определённым идентификатором. Идентификатор указывается с помощью решётки
#
.#uniqueElement {
background-color: yellow;
}
4️⃣Комбинированные селекторы:
✅Позволяют выбирать элементы, используя комбинацию различных критериев.
✅Селекторы потомков: выбирают элементы, которые находятся внутри другого элемента.
div p {
margin: 20px;
}
✅Селекторы дочерних элементов: выбирают элементы, которые являются дочерними для другого элемента.
div > p {
margin: 20px;
}
✅Смежные селекторы: выбирают элементы, которые следуют непосредственно за другим элементом.
h1 + p {
margin-top: 10px;
}
✅Селекторы по атрибуту: выбирают элементы с определённым атрибутом.
a[href] {
color: red;
}
5️⃣Псевдоклассы:
✅Позволяют выбирать элементы в определённом состоянии.
a:hover {
color: green;
}
6️⃣Псевдоэлементы:
✅Позволяют стилизовать определённые части элементов.
p::first-line {
font-weight: bold;
}
Примеры:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример селекторов</title>
<style>
/* Селектор по тегу */
h1 {
color: blue;
}
/* Селектор по классу */
.highlight {
background-color: yellow;
}
/* Селектор по ID */
#main {
font-size: 20px;
}
/* Селектор по атрибуту */
a[target="_blank"] {
color: red;
}
/* Псевдокласс */
a:hover {
text-decoration: underline;
}
/* Псевдоэлемент */
p::first-letter {
font-size: 200%;
color: green;
}
</style>
</head>
<body>
<h1>Заголовок</h1>
<p class="highlight">Это пример текста с подсветкой.</p>
<p id="main">Это основной текст.</p>
<a href="https://example.com" target="_blank">Ссылка</a>
</body>
</html>
Селектор — это шаблон, который выбирает элементы HTML для применения стилей. Существуют разные типы селекторов, такие как по тегу, классу, ID, а также комбинированные селекторы, псевдоклассы и псевдоэлементы.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Какое значение this будет в функции-стрелке, вложенной в метод объекта, вызванного через setTimeout?
Anonymous Quiz
26%
Ссылается на глобальный объект (window в браузерах).
33%
Ссылается на объект, к которому принадлежит метод.
12%
undefined из-за строгого режима.
29%
Значение this передаётся в функцию-стрелку из внешней функции.
Привет, ребят, хочу сделать так, чтобы для каждого вопроса было поясняющее видео в reels/shorts формате.
Ищу человека который с этим поможет, работу оплачу. Вопросы есть, нужен простой монтаж и озвучка. Все видосы делаются по шаблону.
Если интересует такая подработка напишите мне @kivaiko
Ищу человека который с этим поможет, работу оплачу. Вопросы есть, нужен простой монтаж и озвучка. Все видосы делаются по шаблону.
Если интересует такая подработка напишите мне @kivaiko
Что такое адаптивная верстка ?
Спросят с вероятностью 7%
Адаптивная верстка — это метод создания веб-страниц, которые автоматически подстраиваются под различные размеры экранов и устройства, обеспечивая оптимальное отображение и удобство использования. Это означает, что один и тот же сайт будет хорошо выглядеть и функционировать как на настольных компьютерах с большими экранами, так и на планшетах и смартфонах с меньшими экранами.
Основные техники и принципы адаптивной верстки включают:
1️⃣Медиа-запросы (Media Queries):
✅Это CSS-инструмент, который позволяет применять разные стили в зависимости от характеристик устройства, таких как ширина и высота экрана, ориентация и разрешение.
2️⃣Гибкие макеты (Fluid Grids):
✅Использование процентных значений для размеров элементов вместо фиксированных пикселей. Это позволяет элементам изменять размер в зависимости от размера экрана.
3️⃣Гибкие изображения (Flexible Images):
✅Изображения, которые изменяют размер в зависимости от размеров родительского контейнера.
4️⃣Использование фреймворков:
✅Существуют популярные CSS-фреймворки, такие как Bootstrap и Foundation, которые предоставляют готовые решения для адаптивной верстки.
5️⃣Мобильный подход (Mobile-First):
✅Разработка сайта сначала для мобильных устройств, а затем добавление стилей для более крупных экранов. Это позволяет сосредоточиться на ключевом контенте и функциональности.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 7%
Адаптивная верстка — это метод создания веб-страниц, которые автоматически подстраиваются под различные размеры экранов и устройства, обеспечивая оптимальное отображение и удобство использования. Это означает, что один и тот же сайт будет хорошо выглядеть и функционировать как на настольных компьютерах с большими экранами, так и на планшетах и смартфонах с меньшими экранами.
Основные техники и принципы адаптивной верстки включают:
1️⃣Медиа-запросы (Media Queries):
✅Это CSS-инструмент, который позволяет применять разные стили в зависимости от характеристик устройства, таких как ширина и высота экрана, ориентация и разрешение.
/* Стили по умолчанию для мобильных устройств */
body {
font-size: 16px;
}
/* Стили для планшетов */
@media (min-width: 768px) {
body {
font-size: 18px;
}
}
/* Стили для настольных компьютеров */
@media (min-width: 1024px) {
body {
font-size: 20px;
}
}
2️⃣Гибкие макеты (Fluid Grids):
✅Использование процентных значений для размеров элементов вместо фиксированных пикселей. Это позволяет элементам изменять размер в зависимости от размера экрана.
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.column {
float: left;
width: 50%;
}
3️⃣Гибкие изображения (Flexible Images):
✅Изображения, которые изменяют размер в зависимости от размеров родительского контейнера.
img {
max-width: 100%;
height: auto;
}
4️⃣Использование фреймворков:
✅Существуют популярные CSS-фреймворки, такие как Bootstrap и Foundation, которые предоставляют готовые решения для адаптивной верстки.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-6">Контент 1</div>
<div class="col-md-6">Контент 2</div>
</div>
</div>
5️⃣Мобильный подход (Mobile-First):
✅Разработка сайта сначала для мобильных устройств, а затем добавление стилей для более крупных экранов. Это позволяет сосредоточиться на ключевом контенте и функциональности.
/* Стили для мобильных устройств */
body {
font-size: 16px;
}
/* Стили для более крупных экранов */
@media (min-width: 768px) {
body {
font-size: 18px;
}
}
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Как JavaScript обрабатывает микрозадачи по сравнению с макрозадачами в цикле событий?
Anonymous Quiz
20%
Макрозадачи выполняются перед микрозадачами.
71%
Микрозадачи выполняются до начала следующей макрозадачи.
7%
Микрозадачи и макрозадачи выполняются параллельно.
2%
Макрозадачи и микрозадачи выполняются в случайном порядке.
Для чего служат vh, vw при указании размеров ?
Спросят с вероятностью 7%
vh (viewport height) и vw (viewport width) — это единицы измерения, которые используются для указания размеров элементов относительно размеров области просмотра (viewport). Эти единицы особенно полезны при создании адаптивных и отзывчивых дизайнов, так как они позволяют легко масштабировать элементы в зависимости от размеров окна браузера.
Определения:
✅`vh` (viewport height): 1
✅`vw` (viewport width): 1
Примеры:
1️⃣Указание высоты элемента в `vh`:
В этом примере элемент с классом
2️⃣Указание ширины элемента в
В этом примере элемент с классом
3️⃣Создание адаптивного текста:
В этом примере размер шрифта элемента с классом
Преимущества:
✅Адаптивность: Эти единицы позволяют легко адаптировать элементы к различным размерам экранов без необходимости использовать медиа-запросы.
✅Процентное соотношение: Основываются на процентах, что делает их удобными для создания элементов, занимающих определённую долю области просмотра.
✅Простота в использовании: Легко понять и применять, особенно для быстрого создания отзывчивых дизайнов.
Пример с vh и vw:
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 7%
vh (viewport height) и vw (viewport width) — это единицы измерения, которые используются для указания размеров элементов относительно размеров области просмотра (viewport). Эти единицы особенно полезны при создании адаптивных и отзывчивых дизайнов, так как они позволяют легко масштабировать элементы в зависимости от размеров окна браузера.
Определения:
✅`vh` (viewport height): 1
vh
равен 1% от высоты области просмотра.✅`vw` (viewport width): 1
vw
равен 1% от ширины области просмотра.Примеры:
1️⃣Указание высоты элемента в `vh`:
.full-height {
height: 100vh; /* Элемент будет занимать 100% высоты области просмотра */
}
В этом примере элемент с классом
full-height
всегда будет занимать всю высоту области просмотра, независимо от высоты окна браузера.2️⃣Указание ширины элемента в
vw:
.full-width {
width: 100vw; /* Элемент будет занимать 100% ширины области просмотра */
}
В этом примере элемент с классом
full-width
всегда будет занимать всю ширину области просмотра, независимо от ширины окна браузера.3️⃣Создание адаптивного текста:
.responsive-text {
font-size: 2vw; /* Размер шрифта будет 2% от ширины области просмотра */
}
В этом примере размер шрифта элемента с классом
responsive-text
будет изменяться в зависимости от ширины окна браузера, что может быть полезно для создания адаптивных заголовков.Преимущества:
✅Адаптивность: Эти единицы позволяют легко адаптировать элементы к различным размерам экранов без необходимости использовать медиа-запросы.
✅Процентное соотношение: Основываются на процентах, что делает их удобными для создания элементов, занимающих определённую долю области просмотра.
✅Простота в использовании: Легко понять и применять, особенно для быстрого создания отзывчивых дизайнов.
Пример с vh и vw:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример использования vh и vw</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.header {
height: 10vh; /* Высота заголовка - 10% от высоты области просмотра */
background-color: #4CAF50;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.main {
height: 80vh; /* Высота основного контента - 80% от высоты области просмотра */
background-color: #f4f4f4;
display: flex;
align-items: center;
justify-content: center;
font-size: 3vw; /* Размер шрифта - 3% от ширины области просмотра */
}
.footer {
height: 10vh; /* Высота подвала - 10% от высоты области просмотра */
background-color: #333;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="header">
Заголовок
</div>
<div class="main">
Основной контент
</div>
<div class="footer">
Подвал
</div>
</body>
</html>
vh
и vw
в CSS используются для указания размеров элементов относительно высоты и ширины окна браузера. Это позволяет создавать адаптивные дизайны, которые автоматически подстраиваются под размеры экрана.👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Из чего строится размер элементы ?
Спросят с вероятностью 7%
Размер элемента определяется комбинацией нескольких свойств, которые задают его ширину, высоту, отступы, поля и рамки. Эти свойства можно сгруппировать в следующие категории:
1️⃣Content (Содержимое):
✅`width`: задает ширину содержимого элемента.
✅`height`: задает высоту содержимого элемента.
2️⃣Padding (Внутренние отступы):
✅`padding`: задает пространство между содержимым элемента и его границей (рамкой).
3️⃣Border (Рамка):
✅`border`: задает толщину и стиль рамки вокруг содержимого и внутреннего отступа.
4️⃣Margin (Внешние отступы):
✅`margin`: задает пространство между элементом и соседними элементами.
Совокупность всех этих свойств определяет общий размер элемента:
✅Размер содержимого (
✅Внутренние отступы (
✅Рамка (
✅Внешние отступы (
Полная модель:
✅Content: фактическое содержимое элемента.
✅Padding: пространство вокруг содержимого.
✅Border: рамка вокруг padding.
✅Margin: пространство вокруг border, отделяющее элемент от других элементов.
Box Model (Модель коробки):
Существует понятие "модель коробки" (box model), которая объединяет все вышеуказанные элементы для расчета общего размера и пространства, занимаемого элементом.
Пример
Рассчет общего размера элемента:
✅Content: 200px (width) x 100px (height)
✅Padding: 10px со всех сторон (добавляет 20px к ширине и 20px к высоте)
✅Border: 2px со всех сторон (добавляет 4px к ширине и 4px к высоте)
✅Margin: 20px со всех сторон (не влияет на размер самого элемента, но влияет на его позиционирование относительно других элементов)
Итоговый размер элемента, включая padding и border:
✅Ширина: 200px (width) + 20px (padding) + 4px (border) = 224px
✅Высота: 100px (height) + 20px (padding) + 4px (border) = 124px
Box-sizing:
Позволяет изменять расчет размеров элемента. Значение
В этом случае ширина и высота элемента будут равны 200px и 100px соответственно, и padding и border будут включены в эти размеры.
Размер элемента строится из содержимого (width, height), внутренних отступов (padding), рамки (border) и внешних отступов (margin). Эти свойства вместе формируют модель коробки (box model), которая определяет общий размер и расположение элемента на странице.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 7%
Размер элемента определяется комбинацией нескольких свойств, которые задают его ширину, высоту, отступы, поля и рамки. Эти свойства можно сгруппировать в следующие категории:
1️⃣Content (Содержимое):
✅`width`: задает ширину содержимого элемента.
✅`height`: задает высоту содержимого элемента.
.element {
width: 200px;
height: 100px;
}
2️⃣Padding (Внутренние отступы):
✅`padding`: задает пространство между содержимым элемента и его границей (рамкой).
.element {
padding: 10px; /* Внутренние отступы со всех сторон */
}
3️⃣Border (Рамка):
✅`border`: задает толщину и стиль рамки вокруг содержимого и внутреннего отступа.
.element {
border: 2px solid black; /* Толщина, стиль и цвет рамки */
}
4️⃣Margin (Внешние отступы):
✅`margin`: задает пространство между элементом и соседними элементами.
.element {
margin: 20px; /* Внешние отступы со всех сторон */
}
Совокупность всех этих свойств определяет общий размер элемента:
✅Размер содержимого (
width
+ height
)✅Внутренние отступы (
padding
)✅Рамка (
border
)✅Внешние отступы (
margin
)Полная модель:
✅Content: фактическое содержимое элемента.
✅Padding: пространство вокруг содержимого.
✅Border: рамка вокруг padding.
✅Margin: пространство вокруг border, отделяющее элемент от других элементов.
Box Model (Модель коробки):
Существует понятие "модель коробки" (box model), которая объединяет все вышеуказанные элементы для расчета общего размера и пространства, занимаемого элементом.
Пример
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример Box Model</title>
<style>
.element {
width: 200px; /* Ширина содержимого */
height: 100px; /* Высота содержимого */
padding: 10px; /* Внутренние отступы */
border: 2px solid black; /* Рамка */
margin: 20px; /* Внешние отступы */
}
</style>
</head>
<body>
<div class="element">Пример элемента</div>
</body>
</html>
Рассчет общего размера элемента:
✅Content: 200px (width) x 100px (height)
✅Padding: 10px со всех сторон (добавляет 20px к ширине и 20px к высоте)
✅Border: 2px со всех сторон (добавляет 4px к ширине и 4px к высоте)
✅Margin: 20px со всех сторон (не влияет на размер самого элемента, но влияет на его позиционирование относительно других элементов)
Итоговый размер элемента, включая padding и border:
✅Ширина: 200px (width) + 20px (padding) + 4px (border) = 224px
✅Высота: 100px (height) + 20px (padding) + 4px (border) = 124px
Box-sizing:
Позволяет изменять расчет размеров элемента. Значение
border-box
включает padding и border в свойства width
и height
..element {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 10px;
border: 2px solid black;
}
В этом случае ширина и высота элемента будут равны 200px и 100px соответственно, и padding и border будут включены в эти размеры.
Размер элемента строится из содержимого (width, height), внутренних отступов (padding), рамки (border) и внешних отступов (margin). Эти свойства вместе формируют модель коробки (box model), которая определяет общий размер и расположение элемента на странице.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Какой смысл замыканий, если бы не было функций высшего порядка ?
Спросят с вероятностью 3%
Замыкания (closures) представляют собой мощную концепцию, которая позволяет функции "запоминать" и сохранять доступ к лексическому окружению, в котором она была создана, даже после завершения выполнения этой функции. Часто используются в комбинации с функциями высшего порядка, но они полезны и сами по себе, даже если бы функции высшего порядка не существовали. Рассмотрим, почему замыкания важны и какие задачи они решают.
Основные сценарии использования замыканий
1️⃣Сохранение состояния
✅Замыкания позволяют сохранить состояние между вызовами функции. Это полезно для создания функций с "памятью".
В этом примере функция
2️⃣Инкапсуляция данных
✅Замыкания позволяют скрывать данные и делать их недоступными снаружи функции, предоставляя только ограниченный интерфейс для взаимодействия с этими данными.
Здесь мы инкапсулируем переменную
Почему замыкания полезны даже без функций высшего порядка
1️⃣Лексическое окружение
✅Замыкания используют лексическое окружение, что позволяет функции доступ к переменным, определенным в области видимости, в которой она была создана.
Здесь функция
2️⃣Создание частных данных
✅Замыкания позволяют создавать частные данные и методы, что особенно важно для модульного и безопасного программирования.
В этом примере
Замыкания полезны не только в контексте функций высшего порядка, но и сами по себе. Они позволяют сохранять состояние, инкапсулировать данные и создавать функции с предустановленными параметрами. Замыкания используют лексическое окружение, что позволяет функции доступ к переменным из области видимости, в которой она была создана, даже после завершения выполнения этой области. Это делает замыкания мощным инструментом для структурирования и безопасности кода.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 3%
Замыкания (closures) представляют собой мощную концепцию, которая позволяет функции "запоминать" и сохранять доступ к лексическому окружению, в котором она была создана, даже после завершения выполнения этой функции. Часто используются в комбинации с функциями высшего порядка, но они полезны и сами по себе, даже если бы функции высшего порядка не существовали. Рассмотрим, почему замыкания важны и какие задачи они решают.
Основные сценарии использования замыканий
1️⃣Сохранение состояния
✅Замыкания позволяют сохранить состояние между вызовами функции. Это полезно для создания функций с "памятью".
function createCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3
В этом примере функция
createCounter
создает счетчик, который сохраняет свое состояние между вызовами.2️⃣Инкапсуляция данных
✅Замыкания позволяют скрывать данные и делать их недоступными снаружи функции, предоставляя только ограниченный интерфейс для взаимодействия с этими данными.
function createPrivateCounter() {
let count = 0;
return {
increment: function() {
count++;
},
getValue: function() {
return count;
}
};
}
const privateCounter = createPrivateCounter();
privateCounter.increment();
console.log(privateCounter.getValue()); // 1
console.log(privateCounter.count); // undefined (count недоступен)
Здесь мы инкапсулируем переменную
count
и предоставляем методы для ее изменения и получения значения.Почему замыкания полезны даже без функций высшего порядка
1️⃣Лексическое окружение
✅Замыкания используют лексическое окружение, что позволяет функции доступ к переменным, определенным в области видимости, в которой она была создана.
function outer() {
let outerVariable = 'I am outside!';
function inner() {
console.log(outerVariable);
}
inner();
}
outer(); // 'I am outside!'
Здесь функция
inner
имеет доступ к переменной outerVariable
, даже если она вызывается вне ее лексической области видимости.2️⃣Создание частных данных
✅Замыкания позволяют создавать частные данные и методы, что особенно важно для модульного и безопасного программирования.
function Person(name) {
let _name = name;
return {
getName: function() {
return _name;
},
setName: function(newName) {
_name = newName;
}
};
}
const person = Person('John');
console.log(person.getName()); // 'John'
person.setName('Doe');
console.log(person.getName()); // 'Doe'
console.log(person._name); // undefined (_name is not accessible)
В этом примере
_name
является частной переменной и доступна только через методы getName
и setName
.Замыкания полезны не только в контексте функций высшего порядка, но и сами по себе. Они позволяют сохранять состояние, инкапсулировать данные и создавать функции с предустановленными параметрами. Замыкания используют лексическое окружение, что позволяет функции доступ к переменным из области видимости, в которой она была создана, даже после завершения выполнения этой области. Это делает замыкания мощным инструментом для структурирования и безопасности кода.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых