ECMAScript 2015, также известный как ES6, представил классы JavaScript.
JavaScript классы - это шаблоны для объектов JavaScript.
JavaScript Синтаксис класса
Используйте ключевое слово class для создания класса.
Всегда добавляйте метод с именем constructor():
Синтаксис
class ClassName {
constructor() { ... }
}
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
В приведенном выше примере создается класс с именем "Car".
Класс имеет два начальных свойства: "name" и "year".
Класс JavaScript не является объектом.
Это шаблон для объектов JavaScript.
Использование класса
Когда у вас есть класс, вы можете использовать его для создания объектов:
let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);
В приведенном выше примере класс Car используется для создания двух объектов Car.
Метод конструктора вызывается автоматически при создании нового объекта.
Метод конструктора
Метод конструктора - это особый метод:
- У него должно быть точное название "constructor"
- Выполняется автоматически при создании нового объекта
- Он используется для инициализации свойств объекта
Если вы не определите метод конструктора, JavaScript добавит пустой метод конструктора.
Методы класса
Методы класса создаются с тем же синтаксисом, что и методы объекта.
Используйте ключевое слово class для создания класса.
Всегда добавляйте constructor() метод.
Затем добавьте любое количество методов.
Синтаксис
class ClassName {
constructor() { ... }
method_1() { ... }
method_2() { ... }
method_3() { ... }
}
}
Создайте метод класса с именем "age", который возвращает год Car:
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 |
Вы узнаете намного больше о классах JavaScript позже в этом руководстве.