Understanding Classes, Objects, Prototype, Inheritance, Constructors, super(), and this in JavaScript
JavaScript, is an object-oriented language, with various principles such as classes, inheritance, constructors, super(), and this facilitates the creation and organization of code. Let's dive into these concepts and understand their significance through simple examples.
Classes in JavaScript
JavaScript introduced the concept of classes in ECMAScript 2015 (ES6), providing a more structured way to create objects. A class is a blueprint for creating objects with shared properties and methods.
Example: Creating a Simple JavaScript Class
Let's consider a Vehicle class:
class Vehicle {
constructor(make, model) {
this.make = make;
this.model = model;
}
displayInfo() {
console.log(`Make: ${this.make}, Model: ${this.model}`);
}
}
In this example, a Vehicle is a class with a constructor that initializes its make and model properties. It also contains a displayInfo() method to show the vehicle's information.
Objects in JavaScript
Let's use our classes to create objects:
The object is an entity having a state and behavior (properties and methods)
Example: Creating Object of Vehicle and Car
class Vehicle {
constructor(make, model) {
this.make = make;
this.model = model;
}
displayInfo() {
console.log(`Make: ${this.make}, Model: ${this.model}`);
}
}
const vehicle1 = new Vehicle('Toyota', 'Camry');
// Displaying vehicle information
vehicle1.displayInfo();
// Output: Make: Toyota, Model: Camry
In this example, we created instances of Vehicle and utilized their displayInfo() methods to showcase their information.
Prototype in JavaScript
Objects have a special property called prototype. (a prototype is also an object)
If the object and prototype have the same method, the object's method will be used.
Example: for Prototype
class Vehicle {
constructor(make, model) {
this.make = make;
this.model = model;
}
displayInfo() {
console.log(`Make: ${this.make}, Model: ${this.model}`);
}
}
// Adding a method using prototype to the Vehicle class
Vehicle.prototype.honk = function() {
console.log('Beep beep!');
};
const vehicle1 = new Vehicle('Toyota', 'Camry');
console.log(vehicle1.honk())
Inheritance in JavaScript
Inheritance allows a class (subclass) to inherit properties and methods from another class (superclass). This enables code reusability and promotes a hierarchical structure.
If the child and parent have the same method, the child's method will be used. [Method overriding]
Example: Inheriting from the Vehicle Class
Let's create a Car class that inherits from the Vehicle class:
class Car extends Vehicle {
constructor(make, model, year) {
super(make, model);
this.year = year;
}
displayInfo() {
super.displayInfo();
console.log(`Year: ${this.year}`);
}
}
const car1 = new Car('Ford', 'Mustang', 2022);
//Output: Make: Ford, Model: Mustang, Year:2022
Here, the Car class extends the Vehicle class using the extends keyword. The super(make, model) inside the constructor calls the superclass constructor, setting the make and model properties. Additionally, Car has its year property and overrides the displayInfo() method to include the year information.
Constructors, super(), and this Keyword
Constructors :
Constructors are special methods used for initializing objects when a class is instantiated. They allow us to assign initial values to class properties.
Constructors are automatically invoked by new keyword.
super() :
The super() method is used inside a subclass constructor to call the superclass constructor. It passes arguments to the superclass constructor and allows access to the superclass's properties and methods.
this Keyword :
this refers to the current instance of the class and is used to access its properties and methods within its scope.
Understanding classes, inheritance, constructors, super(), and this in JavaScript allows for better code organization and reusability, enhancing the overall structure of your programs. Practice and experimentation with these concepts will further solidify your understanding.
Comments
Post a Comment