Классы JavaScript
ECMAScript 2015, также известный как ES6, представил классы JavaScript.
Классы JavaScript — это шаблоны для объектов JavaScript.
Синтаксис класса JavaScript
Используйте ключевое слово classдля создания класса.
Всегда добавляйте метод с именем constructor():
Синтаксис
class ClassName {
constructor() { ... }
}
Пример
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
В приведенном выше примере создается класс с именем «Автомобиль».
Класс имеет два исходных свойства: «имя» и «год».
Класс JavaScript не является объектом.
Это шаблон для объектов JavaScript.
Использование класса
Когда у вас есть класс, вы можете использовать его для создания объектов:
Пример
let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);
В приведенном выше примере класс Car используется для создания двух объектов Car .
Метод конструктора вызывается автоматически при создании нового объекта.
Метод конструктора
Метод конструктора — это специальный метод:
- Он должен иметь точное имя «конструктор».
- Выполняется автоматически при создании нового объекта
- Он используется для инициализации свойств объекта.
Если вы не определите метод конструктора, JavaScript добавит пустой метод конструктора.
Методы класса
Методы класса создаются с тем же синтаксисом, что и методы объекта.
Используйте ключевое слово classдля создания класса.
Всегда добавляйте constructor()метод.
Затем добавьте любое количество методов.
Синтаксис
class ClassName {
constructor() { ... }
method_1() { ... }
method_2() { ... }
method_3() { ... }
}
Создайте метод класса с именем «возраст», который возвращает возраст автомобиля:
Пример
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 =
"My car is " + myCar.age() + " years old.";
Вы можете отправлять параметры в методы класса:
Пример
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=
"My car is
" + myCar.age(year) + " years old.";
Поддержка браузера
В следующей таблице указана первая версия браузера с полной поддержкой классов в JavaScript:
| Chrome 49 | Edge 12 | Firefox 45 | Safari 9 | Opera 36 |
| Mar, 2016 | Jul, 2015 | Mar, 2016 | Oct, 2015 | Mar, 2016 |
"использовать строгий"
Синтаксис в классах должен быть написан в «строгом режиме».
Вы получите сообщение об ошибке, если не будете следовать правилам «строгого режима».
Пример
В «строгом режиме» вы получите ошибку, если используете переменную без ее объявления:
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
// date = new Date(); // This will not work
let date = new Date(); // This will work
return date.getFullYear() - this.year;
}
}
Узнайте больше о «строгом режиме» в: Строгий режим JS .