class | Class in the JavaScript | стандарт ES6
last updated: 1 Augusta 2020
With the advent of the standard ES2015 (ES6) in the JavaScript type appeared class .
A class can contain:
• constructors for the class
• Variables
• Functions
• static functions
Class definition (declaration)
A class is defined by a word class
Example
Html
<script>
class MyBook
{
// constructor at the class
constructor (name)
{
// this.variable name = ...
// this is to create a variable for the class
// create variables for the class
this .Name = name; // the variable contains text
this .Author = ""; // the variable contains text
this .Price = 0; // the variable contains a number
this .Valuta = ''; // the variable contains text
// create a variable for the class
this .MyInfo = // the variable contains a set of properties
{
// property set
PagesCount: 90,
HasPictures: true
};
}
// function at the class
ShowMyMessage (title)
{
alert (title + " " + this .Name + " " + this .MyInfo.PagesCount);
}
}
// create a class object
var obj1 = new MyBook("Mathematics" );
// call the function at the class
obj1.ShowMyMessage("My Book" );
// On the screen we will see "My Book Mathematics 90"
</script>
Variables in the classroom
Note! Variables for a class can be created in more than just the class constructor.
Variables for a class can be created in any function of the class.
To create a variable for a class, you need to write:
this. variable name = ...
it needs to be written inside the function
Html
<script>
class MyBook
{
// function at the class
Calculate ()
{
this .Price = 100;
}
}
// create a class object
var obj1 = new MyBook;
// call the function at the class
obj1.Calculate();
// display the variable at the class
alert (obj1.Price);
// On the screen we will see 100
</script>
Static functions in a class
Word static defines a static function for a class.
A static function can be called without creating a class object.
Html
<script>
class MyBook
{
// function at the class
static Show ()
{
alert ("Hello!" );
}
}
// call a static function on a class
MyBook.Show();
// On the screen we will see Hello!
</script>
Class Definition
Error! If you first create a class object, and then there is a definition of the class.
Html
<script>
// create a class object
var obj1 = new MyBook("Mathematics" ); // Error! Uncaught ReferenceError: MyBook is not defined
// class definition
class MyBook
{
// class constructor
constructor(name)
{
this .Name = name;
}
}
</script>
A class can be unnamed
Html
Example 1 (unnamed class)
<script>
// define an unnamed class
var myClass1 = class
{
// constructor at the class
constructor (name)
{
this .Name = name;
}
// function at the class
ShowMyMessage()
{
alert (this.Name);
}
};
// create a class object
var obj1 = new myClass1("Fantastic" );
// call the function at the class
obj1.ShowMyMessage();
// On the screen we will see "Fantastic"
</script>
Html
Example 2 (unnamed class)
<script>
// create an unnamed class object
var obj1 = new class
{
// constructor at the class
constructor (name)
{
this .Name = name;
}
// function at the class
ShowMyMessage ()
{
alert (this.Name);
}
}("Fantastic" );
// call the function at the class
obj1.ShowMyMessage();
// On the screen we will see "Fantastic"
</script>
Class inheritance
To inherit a class in the JavaScript you need to use the word extends
Html
<script>
// class definition
class Cat
{
// constructor at the class
constructor()
{
}
// function at the class
Say()
{
alert ("Meow" );
}
}
// class Tiger inherited from class Cat
class Tiger extends Cat
{
// constructor at the class
constructor()
{
// call the constructor at the base class
super();
}
// function at the class
Say()
{
// call the function at the base class
super.Say();
alert ("Snarl" );
}
}
// create a class object
var obj1 = new Tiger();
obj1.Say();
// On the screen we will see "Meow" "Snarl"
</script>
Note!
Word super must be used to call the base method or constructor.
Importantly!
If you defined a constructor in an inherited class, you must call the base class constructor.
Html
Example (no errors)
class Tiger extends Cat
{
// constructor at the class
constructor()
{
// call the constructor at the base class
super();
}
}
If you do not call the base class constructor, there will be an error.
Html
Error
class Tiger extends Cat
{
// constructor at the class
constructor()
{
// Error! The base class constructor was not invoked
// Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
}
}