Классы в JavaScript появились в стандарте ES6 и представляют собой синтаксический сахар над прототипами. Они упрощают организацию кода, позволяя создавать объекты с одинаковым набором свойств и методов. Обращение к классу может выполняться напрямую через его имя, через экземпляры или при помощи статических методов.
Чтобы создать экземпляр класса, используется оператор new. При этом вызывается метод constructor, который инициализирует объект. Если требуется доступ к свойствам или методам экземпляра, они вызываются через точку: объект.метод() или объект.свойство. Для статических методов обращение выполняется только через имя класса, без создания экземпляра.
Класс можно использовать и как базу для наследования. В этом случае применяется ключевое слово extends. Обращение к родительским методам осуществляется через super, что позволяет переопределять функциональность без дублирования кода. Такой подход делает структуру программы более гибкой.
Создание экземпляра класса через оператор new
Оператор new используется для создания объекта на основе класса. При вызове конструктора с new автоматически выполняются шаги: создаётся пустой объект, устанавливается прототип, вызывается конструктор с переданными аргументами, результатом возвращается новый экземпляр.
Пример:
class User {
constructor(name, age) {
this.name = name;
this.age = age;
}
info() {
return `${this.name}, ${this.age} лет`;
}
}
const user1 = new User("Анна", 25);
console.log(user1.info()); // "Анна, 25 лет"
Без new вызов конструктора приведёт к ошибке, так как класс не является функцией обычного вызова. Важно всегда использовать new при создании экземпляров.
Передача параметров в конструктор позволяет настраивать каждый объект независимо. Дополнительно можно проверять входные данные внутри конструктора, чтобы избежать некорректного состояния экземпляра.
Обращение к свойствам экземпляра
Свойства экземпляра в JavaScript задаются внутри конструктора класса с использованием ключевого слова this. Каждому объекту создаётся собственное значение свойства, не зависящее от других экземпляров.
class User {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
const u1 = new User("Иван", 25);
const u2 = new User("Ольга", 30);
console.log(u1.name); // "Иван"
console.log(u2.age); // 30
Доступ к свойствам осуществляется через точечную или квадратную нотацию:
u1.name– используется, когда имя свойства заранее известно.u1["age"]– удобно при работе с динамическими ключами.
Изменение свойств происходит напрямую:
u1.age = 26;
u2["name"] = "Ольга Петрова";
Рекомендации при работе со свойствами экземпляра:
- Инициализировать все ожидаемые поля в конструкторе, чтобы структура объекта была предсказуемой.
- Избегать изменения типа значения свойства после создания экземпляра (например, не хранить в
ageсначала число, а затем строку). - Использовать геттеры и сеттеры, если необходимо контролировать доступ или проверку данных.
Вызов методов экземпляра
После создания объекта с помощью ключевого слова new доступ к методам осуществляется через точечную нотацию. Методы, определённые внутри класса, наследуются всеми экземплярами, что позволяет обращаться к ним без дублирования кода.
Пример:
class User {
constructor(name) {
this.name = name;
}
greet() {
return `Привет, ${this.name}`;
}
}
const user1 = new User("Анна");
console.log(user1.greet()); // "Привет, Анна"
Каждый экземпляр хранит собственные данные, но использует одну реализацию метода из прототипа. Это снижает расход памяти и упрощает поддержку.
| Способ вызова | Пример | Результат |
|---|---|---|
| Точечная нотация | user1.greet() |
Возвращает строку с именем |
| Сохранение ссылки | const f = user1.greet.bind(user1); f(); |
Сохраняется корректный контекст |
| Вызов через переменную экземпляра | const obj = new User("Иван"); obj.greet(); |
Метод работает с конкретным объектом |
Рекомендуется использовать bind, call или apply при передаче метода как колбэка, чтобы не потерять контекст this.
Использование статических методов и свойств
Статические элементы в JavaScript принадлежат самому классу, а не его экземплярам. Они вызываются напрямую через имя класса и применяются для задач, которые не связаны с конкретным объектом.
Пример:
class MathHelper {
static PI = 3.14159;
static square(number) {
return number * number;
}
}
console.log(MathHelper.PI); // 3.14159
console.log(MathHelper.square(5)); // 25
При обращении через экземпляр статический метод или свойство будет недоступен. Это предотвращает случайное использование и подчеркивает, что функционал относится к классу целиком.
Рекомендация: применять статические методы для универсальных вычислений, фабричных функций или утилит. Статические свойства удобны для хранения констант, общих настроек или кешированных данных.
Наследование и доступ к родительскому классу
Для создания класса-потомка используется ключевое слово extends. Оно связывает новый класс с родительским и позволяет наследовать методы и свойства.
В конструкторе потомка вызов super() обязателен перед обращением к this. Этот вызов инициализирует родительскую часть объекта. Если родительский класс принимает параметры, их необходимо передать в super().
Методы родителя можно переопределять, сохраняя доступ к исходной реализации через super.имяМетода(). Это полезно, если требуется добавить дополнительную логику, не теряя поведения родителя.
Пример:
class User {
constructor(name) {
this.name = name;
}
greet() {
return `Привет, ${this.name}`;
}
}
class Admin extends User {
constructor(name, role) {
super(name);
this.role = role;
}
greet() {
return super.greet() + ` (роль: ${this.role})`;
}
}
const admin = new Admin("Андрей", "модератор");
console.log(admin.greet()); // Привет, Андрей (роль: модератор)
Использование extends и super обеспечивает структурированный доступ к родительским возможностям и позволяет гибко расширять функциональность классов.
Работа с классами через динамическое имя
В JavaScript доступ к классам по динамическому имени осуществляется через объект глобальной области видимости или модуль. В браузере это window, в Node.js – global. Например, если есть классы:
class User {}
class Admin {}
Можно получить ссылку на класс по строке:
const className = ‘User’;
const ClassRef = window[className];
const instance = new ClassRef();
Для модульной системы используется объект экспорта:
import * as Classes from ‘./classes.js’;
const className = ‘Admin’;
const instance = new Classes[className]();
При динамическом доступе важно проверять существование класса, чтобы избежать ошибок:
if (Classes[className]) {
const instance = new Classes[className]();
}
Для улучшения читаемости кода рекомендуется хранить доступные классы в отдельном объекте, а не использовать глобальный объект напрямую:
const classMap = { User, Admin };
const instance = new classMap[className]();
Такой подход упрощает управление классами, облегчает рефакторинг и снижает вероятность конфликтов имен. Динамическое имя особенно полезно при фабричных функциях и конфигурационных системах, где тип объекта определяется во время выполнения.
Вопрос-ответ:
Как выбрать все элементы с определённым классом на странице?
В JavaScript для поиска элементов с конкретным классом используют метод document.getElementsByClassName('имя_класса') или document.querySelectorAll('.имя_класса'). Первый возвращает HTMLCollection, который ведёт себя как массив, но не поддерживает все методы массивов, например map. Второй возвращает NodeList, который можно превратить в массив через Array.from() и использовать стандартные методы массивов.
Можно ли обратиться к классу через точку, как в CSS?
Да, но только в методах, которые используют CSS-селекторы, например document.querySelector или document.querySelectorAll. В этих методах перед названием класса ставится точка, например document.querySelectorAll('.button'). Методы вроде getElementsByClassName не используют точку — достаточно указать только имя класса.
Как изменить стиль всех элементов с одним классом одновременно?
Сначала нужно получить все элементы через document.getElementsByClassName или document.querySelectorAll. Например: let items = document.querySelectorAll('.item'); Затем можно пройтись циклом forEach по NodeList и изменить свойства стиля каждого элемента: items.forEach(el => el.style.color = 'red');. Так можно менять любые CSS-свойства для всех элементов с указанным классом.
Можно ли работать с классами элементов динамически через JavaScript?
Да, для этого используют объект classList, который доступен у каждого DOM-элемента. С помощью element.classList.add('новый-класс') добавляют класс, element.classList.remove('класс') — удаляют, element.classList.toggle('класс') — переключают наличие класса, а element.classList.contains('класс') проверяет, есть ли класс у элемента. Это удобный способ менять оформление или поведение элементов без замены всех классов сразу.
Чем отличается getElementsByClassName от querySelectorAll?
getElementsByClassName возвращает живую коллекцию HTMLCollection, которая автоматически обновляется при добавлении или удалении элементов с этим классом. querySelectorAll возвращает статический NodeList, который не меняется при изменении DOM. Кроме того, querySelectorAll поддерживает сложные CSS-селекторы, тогда как getElementsByClassName ищет только точное совпадение по имени класса.
Загрузка...
