Classes
JavaScript is different from other object-oriented languages. It is based on constructors and prototypes rather than on classes. For a long time classes were not used in JavaScript. They were introduced in ECMAScript 2015. However, they did not bring a new object oriented model based on classes. Classes just make the code easier to read and write.
Defining classes
Classes are special functions that facilitate the creation of constructors and prototype-based inheritance. Just like in functions, you can declare a class or express it.
Class declaration
To declare a class you use the class keyword followed by the class name and class body in curly brackets {}:
class Person {
constructor(name, surname) {
this.name = name;
this.surname = surname;
}
}
Then you can create an object as if you call the traditional constructor function:
var person = new Person('Jack', 'Smith');
Note that there is a difference between function declaration and class declaration in terms of hoisting. Class declarations are not hoisted and first you have to declare a class and then you can use it. Otherwise a ReferenceError occurs.
var test = new Test(); // ReferenceError
class Test {}
Class expression
Another way of defining classes is class expression
var Person = class {
function constructor(name, surname) {
this.name = name;
this.surname = surname;
}
};
Then you create a new object as follow:
var person2 = new Person('John', 'Smith');
The name of the class you can retrieve through the name property on class.
console.log(Person.name); // Person
Class body
Class body is the part of the class in curly brackets {}. In the class body you define members of the class like methods and properties.
Constructor
The constructor is a special method for creating and initializing objects created using classes.
class Polygon {
constructor(length, width) {
this.length = length;
this.width = width;
}
}
Equivalent using constructor function is as follow:
function Polygon(length, width) {
this.length = length;
this.width = width;
}
Prototype Methods
Method you define using a method name followed by round brackets () with zero or more parameters inside, followed by method body in curly brackets {}.
class Polygon {
// ...
area() {
return this.length * this.width;
}
}
var polygon = new Polygon(10, 5);
console.log(polygon.area()); // 50
Equivalent using prototype of the constructor function is as follow:
Polygon.prototype.area = function() {
return this.length * this.width;
}
Static methods
Static method you define by preceding the method name with the static keyword. Static methods cannot be called through class instance, they are called directly through class name. Static methods do not have equivalent
class Polygon {
constructor(length, width) {
this.length = length;
this.width = width;
}
area() {
return this.length * this.width;
}
static printDimensions(polygon) {
console.log('Length: ' + polygon.length + ' Width: ' + polygon.width);
}
}
var polygon = new Polygon(10, 5);
console.log(Polygon.printDimensions(polygon)); // Length: 10 Width: 5
There is no exact equivalent of static methods in JavaScript outside of classes.
Properties
Instance properties you must define inside of class methods:
class Polygon {
constructor(length, width) {
this.length = length;
this.width = width;
}
}
Prototype properties you must define in the old way, outside of the class body:
Polygon.prototype.figure = 'Rectangle';
Inheritance
Classes support the mechanism of inheritance. Using the extends keyword you can extend existing class. The class that you extend to create a new class is called parent or super class. The new created class is called child or sub class.
Child class inherits all properties and methods except constructor from parent class.
class Employee {
constructor(name, surname) {
this.name = name;
this.surname = surname;
}
work() {
console.log(this.name + ' ' + this.surname + ' works.');
}
}
class Bricklayer extends Employee {
work() {
console.log(this.name + ' ' + this.surname + ' builds houses.');
}
}
var bricklayer = new Bricklayer('John', 'Doe');
bricklayer.work();
// output:
// John Doe builds houses.
The super keyword
Using the super keyword you can refer to parent object and call the parent object constructor or parent object method.
When you want to call parent object constructor you must use the super keyword alone and before the this keyword is used:
super([arguments]);
When you want to call parent object method, you use the super keyword followed by thee dot (.) sign and the name of the method:
super.methodOnParent([arguments]);
class Electrician extends Employee {
constructor(name, surname, specialization) {
super(name, surname); // call the super class constructor
this.specialization = specialization;
}
work() {
super.work(); // call the super class method work()
console.log(this.name + ' ' + this.surname + ' ' + this.specialization + ' installs electrical equipment.');
}
}
var electrician = new Electrician('Tom', 'Smith', 'Electrical Fitter');
electrician.work();
// output:
// Tom Smith works.
// Tom Smith Electrical Fitter installs electrical equipment.
Reply