React Frontend Developer

Question 1

Как проверить, является ли объект экземпляром определенного класса (функции-конструктора)?

Accepted Answer

Для проверки, является ли объект экземпляром определенного класса или функции-конструктора, используется оператор instanceof. Он проверяет, есть ли в цепочке прототипов объекта ссылка на прототип конструктора.

Question 2

Как работают классы под капотом?

Accepted Answer

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

Question 3

Что происходит при создании класса и объявлении методов?

Accepted Answer

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

Question 4

Что такое классы, для чего они нужны и какие ключевые слова есть?

Accepted Answer

Классы — это шаблоны для создания объектов с общими свойствами и методами в JavaScript. Они позволяют организовывать код и реализовывать наследование. Ключевые слова, связанные с классами, включают class, constructor, extends, и super, которые помогают создавать и управлять классами и их экземплярами.

Question 5

Работа с классами на элементах DOM?

Accepted Answer

Для работы с классами на элементах DOM используйте методы classList. Вы можете добавлять, удалять и проверять классы с помощью методов add(), remove() и contains(). Например:const element = document.getElementById('myElement');
element.classList.add('active');Этот код добавляет класс active к элементу.

Question 6

Как работает механизм приватных полей в классах (#field)? Какие преимущества он даёт?

Accepted Answer

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

Question 7

Как работают hidden classes и shape-based оптимизации в V8?

Accepted Answer

Hidden classes (скрытые классы) в V8 — это внутренние структуры, которые движок создает для представления форм объектов и их свойств. Когда вы создаете объекты с одинаковыми свойствами, V8 присваивает им один и тот же скрытый класс, что ускоряет доступ к их свойствам. Shape-based оптимизации позволяют движку быстро определять, где находятся свойства в памяти, что значительно уменьшает время доступа к ним.

Question 8

Как вы организуете структуру CSS классов в своих проектах?

Accepted Answer

Организация структуры CSS классов может быть достигнута с помощью методологий, таких как БЭМ, SMACSS или OOCSS. Важно использовать семантические имена классов, которые отражают их назначение, а также применять подходы, такие как модульность и переиспользуемость, чтобы избежать дублирования кода. Также следует группировать стили по компонентам или страницам, чтобы упростить навигацию и понимание кода.

Question 9

Что такое псевдоклассы?

Accepted Answer

Псевдоклассы — это ключевые слова в CSS, которые добавляют специальные состояния к селекторам. Например, :hover изменяет стиль элемента, когда на него наводят курсор мыши. Другие примеры включают :focus, который применяется к элементам ввода, когда они активны, и :nth-child(), который позволяет выбирать элементы по их порядковому номеру. Псевдоклассы упрощают стилизацию взаимодействий и состояний без необходимости добавлять дополнительные классы в HTML.

Question 10

Каковы различия между классовыми и функциональными компонентами в React?

Accepted Answer

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

Вопросы React Frontend Developer