JavaScript Классы
В ECMAScript 2015, также известном как ES6, появились JavaScript классы.
JavaScript классы - это шаблоны для объектов JavaScript.
Синтаксис JavaScript класса
Используйте ключевое слово class
для создания класса.
Всегда добавляйте метод с именем constructor()
:
Синтаксис
class ClassName {
constructor() { ... }
}
Пример
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
В приведенном выше примере создается класс с именем "Car".
Класс имеет два начальных свойства: "имя" и "год".
JavaScript класс не является объектом.
Он является шаблоном для JavaScript объектов.
Использование класса
Когда есть класс, вы можете использовать его для создания объектов:
В приведенном выше примере используется класс Car для создания двух объектов Car.
Метод конструктора вызывается автоматически при создании нового объекта.
Метод конструктора
Метод конструктора - это особый метод:
- У него должно быть точное имя "конструктор"
- Он выполняется автоматически при создании нового объекта
- Он используется для инициализации свойств объекта
Если вы не указываете метод конструктора, JavaScript добавит пустой метод конструктора.
Методы класса
Методы класса создаются с тем же синтаксисом, что и методы объекта.
Используйте ключевое слово class
для создания класса.
Всегда добавляйте метод constructor()
.
Затем добавьте любое количество методов.
Синтаксис
class ClassName {
constructor() { ... }
method_1() { ... }
method_2() { ... }
method_3() { ... }
}
Создайте метод класса с именем "age" ("возраст"), который возвращает возраст автомобиля:
Пример
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
let date = new Date();
return date.getFullYear() - this.year;
}
}
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"Моему автомобилю " + myCar.age() + " лет.";
Вы можете отправлять параметры в методы класса:
Пример
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age(x) {
return x - this.year;
}
}
let date = new Date();
let year = date.getFullYear();
let myCar = new
Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"Моему автомобилю " + myCar.age(year) + " лет.";
Поддержка браузерами
В следующей таблице определяется первая версия браузера с полной поддержкой классов в JavaScript:
Chrome 49 | Edge 12 | Firefox 45 | Safari 9 | Opera 36 |
Mar, 2016 | Jul, 2015 | Mar, 2016 | Oct, 2015 | Mar, 2016 |
Вы узнаете намного больше о классах JavaScript позже в этом учебнике на нашем сайте W3Schools на русском.