Classes were introduced in JavaScript ECMA2015. Unlike the classes in Object-Oriented Mode, JavaScript classes are just special type of functions. But instead of using the "function" keyword we use the "class". It was introduced in JavaScript to make the syntax look like other object-oriented languages (java, python, c++).
Defining
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
To declare a class, you use the class keyword with the name of the class (Rectangle
here).
Constructor
: This is a special method for initializing an instance of that class. So what that means is that whenever we create a new instance of the class, it will invoke the constructor.
Methods in a Class
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
// Prototype method
area() {
return console.log(`The are is ${this.height*this.width}`);
}
// Static method
static display(rect){
return console.log(`Height: ${rect.height} Width: ${rect.width}`);
}
}
rectangle = new Rectangle(5, 4); // Instantiate the class
rectangle.area();
// The area is 20
Rectangle.display(rectangle1);
// Height: 5 Width: 4
- Prototype Method:
area()
is a prototype method. - Static method:
display()
is a static method.
Prototype Method
A prototype method is a method that is only accessible when you create an instance of the class. As you can see in the example above, you can see the prototype method(line 17) by referring to the object's method name followed by parentheses (any parameters would go inside the parentheses).
Static Method
A static method is something you can call without instantiating the class. Static method are defined on the class itself, and not on the object. That means you cannot call static method on the object(rectangle1), but on the class (Rectangle) as shown in line 19.
Inheritance
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 console.log(`${this.present()} , it is a ${this.model}`);
}
}
mycar = new Model("Ford", "Mustang");
mycar.show();
// I have a Ford, it is a Mustang
To create a class inheritance, use the extends
keyword.
A class created with a class inheritance, inherits all the methods from another class. In thie above example, the Model class inherits all the method from Car class.
The super()
method refers to the parent class. By calling the super()
method in the constructor method, we call the parent's constructor method and gets access to the parent's properties and method.
Inheritance is useful for code-reusability, we can reuse properties and method of an existing class when you create a new class.
Thank you for Reading😎
Comments (0)