class | Класс В JavaScript | стандарт ES6
последнее обновление: 1 августа 2020
С появлением стандарта ES2015 (ES6) В JavaScript появился тип класс .
Класс может содержать:
• конструкторы у класса
• переменные
• функции
• статические функции
Определение (декларация) класса
Класс определяется словом class
Пример
Html
<script>
class MyBook
{
// конструктор у класса
constructor (name)
{
// this.имя переменной = ...
// это создать переменную для класса
// создаем переменные для класса
this .Name = name; // переменная содержит текст
this .Author = ""; // переменная содержит текст
this .Price = 0; // переменная содержит число
this .Valuta = ''; // переменная содержит текст
// создаем переменную для класса
this .MyInfo = // переменная содержит наборо свойств
{
// набор свойств
PagesCount: 90,
HasPictures: true
};
}
// функция у класса
ShowMyMessage (title)
{
alert (title + " " + this .Name + " " + this .MyInfo.PagesCount);
}
}
// создаем объект класса
var obj1 = new MyBook("Mathematics" );
// вызываем функцию у класса
obj1.ShowMyMessage("My Book" );
// На экране увидим "My Book Mathematics 90"
</script>
Переменные в классе
На заметку! Переменные для класса могут создаваться не только в конструкторе класса.
Переменные для класса могут создаваться в любой функции класса.
Чтобы создать переменную для класса нужно написать:
this. имя переменной = ...
это нужно писать внутри функции
Html
<script>
class MyBook
{
// функция у класса
Calculate ()
{
this .Price = 100;
}
}
// создаем объект класса
var obj1 = new MyBook;
// вызываем функцию у класса
obj1.Calculate();
// выводим на экран переменную у класса
alert (obj1.Price);
// На экране увидим 100
</script>
Статические функции в классе
Слово static определяет статическую функцию для класса.
Статическая функция может вызываться без создания объекта класса.
Html
<script>
class MyBook
{
// функция у класса
static Show ()
{
alert ("Hello!" );
}
}
// вызвать статическую функцию у класса
MyBook.Show();
// На экране увидим Hello!
</script>
Определение класса
Ошибка! Если сначала создавать объект класса, а потом идет определение класса.
Html
<script>
// создать обект класса
var obj1 = new MyBook("Mathematics" ); // Error! Uncaught ReferenceError: MyBook is not defined
// определение класса
class MyBook
{
// конструктор класса
constructor(name)
{
this .Name = name;
}
}
</script>
Класс может быть безымянным
Html
Пример 1 (безымянный класс)
<script>
// определяем безымянный класса
var myClass1 = class
{
// конструктор у класса
constructor (name)
{
this .Name = name;
}
// функция у класса
ShowMyMessage()
{
alert (this.Name);
}
};
// создаем объект класса
var obj1 = new myClass1("Fantastic" );
// вызываем функцию у класса
obj1.ShowMyMessage();
// На экране увидим "Fantastic"
</script>
Html
Пример 2 (безымянный класс)
<script>
// создаем объект безымянного класса
var obj1 = new class
{
// конструктор у класса
constructor (name)
{
this .Name = name;
}
// функция у класса
ShowMyMessage ()
{
alert (this.Name);
}
}("Fantastic" );
// вызываем функцию у класса
obj1.ShowMyMessage();
// На экране увидим "Fantastic"
</script>
Наследование класса
Для наследования класса В JavaScript нужно использовать слово extends
Html
<script>
// определение класса
class Cat
{
// конструктор у класса
constructor()
{
}
// функция у класса
Say()
{
alert ("Мяу" );
}
}
// класс Tiger наследуется от класса Cat
class Tiger extends Cat
{
// конструктор у класса
constructor()
{
// вызываем конструтор у базового класса
super();
}
// функция у класса
Say()
{
// вызываем функцию у базового класса
super.Say();
alert ("Рычать" );
}
}
// создаем объект класса
var obj1 = new Tiger();
obj1.Say();
// На экране увидим "Мяу" "Рычать"
</script>
На заметку!
Слово super нужно использовать чтобы вызвать базовый метод или конструктор.
Важно!
Если вы определили конструктор в наследуемом классе, то должны вызывать конструктор базового класса.
Html
Пример (нет ошибок)
class Tiger extends Cat
{
// конструктор у класса
constructor()
{
// вызываем конструтор у базового класса
super();
}
}
Если не вызовите конструктор базового класса то будет ошибка.
Html
Ошибка
class Tiger extends Cat
{
// конструктор у класса
constructor()
{
// Ошибка! Конструтор базового класса не вызвали
// Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
}
}