ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

JS Учебник

JS Старт JS Введение JS Установка JS Вывод JS Объявления JS Синтаксис JS Комментарии JS Переменные JS Операторы JS Арифметические JS Присваивание JS Типы данных JS Функции JS Объекты JS События JS Строки JS Методы строки JS Числа JS Методы числа JS Массивы JS Методы массива JS Сортировка массива JS Итерация массива JS Даты JS Форматы дат JS Методы получения дат JS Методы установки дат JS Математические JS Рандомные JS Булевы JS Сравнения JS Условия JS Switch JS Цикл For JS Цикл While JS Прерывание JS Преобразование типов JS Побитовые JS Регулярные выражения JS Ошибки JS Область действия JS Подъём JS Строгий режим JS Ключевое слово this JS Ключевое слово Let JS Ключевое слово Const JS Функции стрелок JS Классы JS Отладка JS Гид по стилю JS Лучшие практики JS Ошибки JS Производительность JS Зарезервированные слова JS Версии JS Версия ES5 JS Версия ES6 JS JSON

JS Формы

JS Формы Формы API

JS Объекты

Определения объектов Свойства объекта Методы объекта Доступ к объектам Конструкторы объектов Прототипы объектов Объект ECMAScript 5

JS Функции

Определения функций Параметры функции Обращение к функции Вызов функции Применение функции Закрытие функции

JS HTML DOM

DOM Введение DOM Методы DOM Документ DOM Элементы DOM HTML DOM CSS DOM Анимация DOM События DOM Слушатель событий DOM Навигация DOM Узлы DOM Коллекции DOM Узловые списки

JS Объектная модель браузера BOM

JS Окно JS Скрин JS Локация JS История JS Навигатор JS Всплывающее оповещение JS Тайминг JS Куки

JS AJAX

AJAX Введение AJAX XMLHttp AJAX Запрос AJAX Отклик AJAX XML Файл AJAX PHP AJAX ASP AJAX База данных AJAX Приложения AJAX Примеры

JS JSON

JSON Введение JSON Синтаксис JSON и XML JSON Типы данных JSON Анализ JSON Stringify JSON Объекты JSON Массивы JSON PHP JSON HTML JSON JSONP

JS и jQuery

jQuery Селекторы jQuery HTML jQuery CSS jQuery DOM

JS Примеры

JS Примеры JS HTML DOM JS HTML Input JS HTML Объекты JS HTML События JS Броузер JS Упражнения JS Викторина JS Сертификат

JS Справочники

JavaScript Объекты HTML DOM Объекты

JavaScript. Уроки для начинающих

JavaScript Классы


ECMAScript 2015

ES6, также известный как ECMAScript2015, представил классы.

Класс является типом функции, но вместо того, чтобы использовать ключевое слово function для его инициирования, мы используем ключевое слово class, а свойства назначаются внутри метода constructor().


Определение класса

Используйте ключевое слово class для создания класса и всегда добавляйте метод constructor().

Метод constructor вызывается каждый раз, когда объект класса инициализируется.

Пример

Простое определение класса для класса с именем "Car":

class Car {
  constructor(brand) {
    this.carname = brand;
  }
}

Теперь вы можете создавать объекты, используя класс Car:

Пример

Создайте объект с именем "mycar" на основе класса Car:

class Car {
  constructor(brand) {
    this.carname = brand;
  }
}
mycar = new Car("Ford");

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

Примечание: Метод конструктора (constructor-метод) вызывается автоматически при инициализации объекта.


Методы

Метод конструктора является специальным, он инициализирует свойства, он вызывается автоматически при инициализации класса и должен иметь точное имя "constructor", фактически, если у вас нет метода конструктора, JavaScript добавит невидимый и пустой метод конструктора.

Вы также можете создавать свои собственные методы, синтаксис должен быть обычный:

Пример

Создайте метод с именем "present":

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return "I have a " + this.carname;
  }
}

mycar = new Car("Ford");
document.getElementById("demo").innerHTML = mycar.present();

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

Как вы можете видеть в приведенном выше примере, вы вызываете метод, ссылаясь на имя метода объекта, за которым следуют круглые скобки (любые параметры будут заключены в круглые скобки).

Пример

Отправьте параметр методу "present()":

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present(x) {
    return x + ", I have a " + this.carname;
  }
}

mycar = new Car("Ford");
document.getElementById("demo").innerHTML = mycar.present("Hello");

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


Статические методы

Статические методы определены в самом классе, а не в прототипе.

Это означает, что вы не можете вызывать статический метод для объекта (mycar), но для класса (Car):

Пример

Создайте статический метод и вызовите его в классе:

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  static hello() {
    return "Hello!!";
  }
}

mycar = new Car("Ford");

// Вызовите 'hello()' в классе Car:
document.getElementById("demo").innerHTML = Car.hello();

// а НЕ на объекте 'mycar':
//document.getElementById("demo").innerHTML = mycar.hello();
// это вызовет ошибку.

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

Если вы хотите использовать объект mycar внутри статического метода, вы можете отправить его в качестве параметра:

Пример

Отправьте "mycar" как параметр:

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  static hello(x) {
    return "Hello " + x.carname;
  }
}

mycar = new Car("Ford");

document.getElementById("demo").innerHTML = Car.hello(mycar);

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


Наследование

Чтобы создать наследование класса, используйте ключевое слово extends.

Класс, созданный с наследованием класса, наследует все методы из другого класса:

Пример

Создайте класс с именем "Model", который будет наследовать методы от класса "Car":

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'I have a ' + this.carname;
  }
}

class Model extends Car {
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return this.present() + ', it is a ' + this.model;
  }
}

mycar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = mycar.show();

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

Метод super() ссылается на родительский класс.

Вызывая метод super() в методе конструктора, мы вызываем метод конструктора родителя и получаем доступ к его свойствам и методам.

Наследование полезно для повторного использования кода: повторно используйте свойства и методы существующего класса при создании нового класса.


Геттеры и Сеттеры (Получатели и Установщики)

Классы также позволяют использовать геттеры и сеттеры.

Может быть разумно использовать методы получения и установки для ваших свойств, особенно если вы хотите сделать что-то особенное со значением перед их возвратом или перед их установкой.

Чтобы добавить методы получения и установки (геттеры и сеттеры) в класс, используйте ключевые слова get и set.

Пример

Создайте геттер и сеттер для свойства "carname":

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  get cnam() {
    return this.carname;
  }
  set cnam(x) {
    this.carname = x;
  }
}

mycar = new Car("Ford");

document.getElementById("demo").innerHTML = mycar.cnam;

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

Примечание: даже если геттер является методом, вы не используете круглые скобки, когда хотите получить значение свойства.

В этом случае имя геттера/сеттера (метода получения/установки) не может совпадать с именем свойства carname.

Многие программисты используют символ подчеркивания _ перед именем свойства, чтобы отделить геттер/сеттер от фактического свойства:

Пример

Вы можете использовать символ подчеркивания, чтобы отделить геттер/сеттер от фактического свойства:

class Car {
  constructor(brand) {
    this._carname = brand;
  }
  get carname() {
    return this._carname;
  }
  set carname(x) {
    this._carname = x;
  }
}

mycar = new Car("Ford");

document.getElementById("demo").innerHTML = mycar.carname;

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

Чтобы использовать setter, используйте тот же синтаксис, что и при установке значения свойства без круглых скобок:

Пример

Используйте сеттер, чтобы изменить название автомобиля на "Volvo":

class Car {
  constructor(brand) {
    this._carname = brand;
  }
  get carname() {
    return this._carname;
  }
  set carname(x) {
    this._carname = x;
  }
}

mycar = new Car("Ford");
mycar.carname = "Volvo";
document.getElementById("demo").innerHTML = mycar.carname;

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


Hoisting / Подъём

В отличие от функций и других объявлений JavaScript, объявления классов не поднимаются.

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

Пример

//Вы не можете ещё использовать класс.
//mycar = new Car("Ford")
// Это вызвало бы ошибку.

class Car {
  constructor(brand) {
    this.carname = brand;
  }
}

// Теперь вы можете использовать класс:
mycar = new Car("Ford")
Попробуйте сами »

Примечание: Для других объявлений, таких как функции, вы НЕ получите сообщение об ошибке, если попытаетесь использовать его до того, как оно будет объявлено, поскольку поведение объявлений JavaScript по умолчанию поднимается (происходит перемещение объявления вверх).


"use strict" / "строгое использование"

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

Вы получите ошибку, если не будете следовать правилам "strict mode".

Пример

В "strict mode" вы получите ошибку, если будете использовать переменную, не объявляя её:

class Car {
  constructor(brand) {
    i = 0;
    this.carname = brand;
  }
}
var mycar = new Car("Ford");
Попробуйте сами »

Узнайте больше о "strict mode" в разделе JavaScript Strict Mode на нашем сайте.


Поддержка браузерами

В следующей таблице определяется первая версия браузера с полной поддержкой классов в JavaScript:

Chrome 49 Edge 12 Firefox 45 Safari 9 Opera 36
Mar, 2016 Jul, 2015 Mar, 2015 Oct, 2015 Mar, 2016