Классы 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Шаблон.

Использование класса

Когда у вас есть класс, вы можете использовать его для создания объектов:

Пример

let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);

Попробуйте сами

В примере используется класс Carчтобы создать два Объект Car.

Метод constructor() автоматически вызывается при создании нового объекта (constructor method).

Метод constructor()

Метод constructor() является специальным методом:

  • У него должно быть точное имя "constructor"
  • Автоматически выполняется при создании нового объекта
  • Используется для инициализации свойств объекта
  • Если вы не определили метод constructor(), JavaScript добавит пустой метод constructor().

Методы класса

Грамматика создания методов класса такая же, как и методов объекта.

Используйте ключевое слово 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 IE Firefox Safari Opera
Chrome 49 Edge 12 Firefox 45 Safari 9 Opera 36
Март 2016 года Июль 2015 года Март 2016 года Октябрь 2015 года Март 2016 года

"use strict"

Синтаксис в классе должен быть написан в "строгом режиме".

Если вы не соблюдаете правила "строгого режима", вы получите сообщение об ошибке.

Пример

В "строгом режиме", если вы используете переменную, не объявленную, вы получите ошибку:

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    // date = new Date();  // Это не будет работать
    let date = new Date(); // Это будет работать
    return date.getFullYear() - this.year;
  }
}

Попробуйте сами

В JS строгий режим Узнайте больше о "строгом режиме" здесь.