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".
Класс имеет два начальных свойства: "name" и "year".
JavaScript класс не является объектом.
Он является шаблоном для JavaScript объектов.
Использование класса
Когда у вас есть класс, вы можете использовать его для создания объектов:
В приведенном выше примере используется класс Car для создания двух объектов Car.
Метод конструктора вызывается автоматически при создании нового объекта.
Метод конструктора
Метод конструктора - это особый метод:
- У него должно быть точное имя "constructor"
- Он выполняется автоматически при создании нового объекта.
- Он используется для инициализации свойств объекта.
Если вы не указываете метод конструктора, JavaScript добавит пустой метод конструктора.
Методы класса
Методы класса создаются с тем же синтаксисом, что и методы объекта.
Используйте ключевое слово class для создания класса.
Всегда добавляйте метод constructor().
Затем добавьте любое количество методов.
Синтаксис
class ClassName {
constructor() { ... }
method_1() { ... }
method_2() { ... }
method_3() { ... }
}
Создайте метод класса с именем "age" (возраст), который возвращает Car 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 =
"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 |
"use strict"
Синтаксис в классах должен быть написан в "strict mode" ("строгом режиме").
Вы получите сообщение об ошибке, если не соблюдаете правила "strict mode" ("строгого режима").
Пример
В "strict mode" вы получите сообщение об ошибке, если используете переменную без её объявления:
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
// date = new Date(); // Это не будет работать
let date = new Date(); // Это будет работать
return date.getFullYear() - this.year;
}
}
Попробуйте сами »
Подробнее о "strict mode" вы можете узнать в главе JS Строгий режим на нашем сайте W3Schools на русском.
