Object-oriented programming (OOP) is a programming paradigm that organizes code into reusable objects. It follows the principles of encapsulation, inheritance, and polymorphism to create modular and maintainable code. In this article, we will explore how OOP is structured and understand the key concepts behind it.
Classes and Objects
In OOP, everything revolves around classes and objects. A class is a blueprint or template that defines the properties and behaviors of an object.
It acts as a user-defined data type. On the other hand, an object is an instance of a class that has its own unique set of property values.
To create a class in HTML using JavaScript, you can use the <script> tag with the class keyword followed by the class name:
<script>
class MyClass {
// properties and methods
}
</script>
You can then create an object based on that class using the new keyword:
<script>
let myObject = new MyClass();
</script>
Properties and Methods
A class can have properties to represent its state and methods to define its behavior. Properties are variables associated with the objects created from the class, while methods are functions that define what those objects can do.
To add properties to a class, you can define them within the class using this.propertyName = value;:
<script>
class Rectangle {
constructor(width, height) {
this.width = width;
this.height = height;
}
}
</script>
To add methods, you can define them within the class using methodName() { .. }:
<script>
class Rectangle {
constructor(width, height) {
this.height = height;
}
calculateArea() {
return this.width * this.height;
}
}
</script>
Inheritance
Inheritance is a fundamental concept in OOP that allows classes to inherit properties and methods from other classes. It enables code reuse and promotes a hierarchical structure of classes.
To create a subclass that inherits from a superclass, you can use the extends keyword:
<script>
class Square extends Rectangle {
constructor(sideLength) {
super(sideLength, sideLength);
}
}
</script>
In the example above, the Square class inherits the properties and methods of the Rectangle class through the extends keyword. The super() method is used to call the constructor of the superclass.
Polymorphism
Polymorphism allows objects of different classes to be treated as objects of a common superclass. It allows flexibility in handling different object types without explicitly knowing their specific class.
To demonstrate polymorphism, let’s consider an example where both Square and Rectangle classes have a method called printInfo():
<script>
class Square {
constructor(sideLength) {
this.sideLength = sideLength;
}
printInfo() {
console.log("This is a square.");
}
}
class Rectangle {
constructor(width, height) {
this.height = height;
}
printInfo() {
console.log("This is a rectangle.");
}
}
</script>
Now, we can create an array of objects from both classes and call the printInfo() method on each object:
<script>
let shapes = [new Square(5), new Rectangle(3, 4)];
for (let shape of shapes) {
shape.printInfo();
}
</script>
The output will be:
- This is a square.
- This is a rectangle.
Even though the objects are of different classes, they can be treated as objects of their common superclass (Shape) due to polymorphism.
Conclusion
In summary, OOP is structured around classes and objects. Classes define the blueprints for creating objects, while objects are instances of those classes. Properties represent the state of objects, and methods define their behavior.
Inheritance allows classes to inherit properties and methods from other classes, promoting code reuse. Polymorphism enables treating different object types as objects of a common superclass. By understanding these concepts, you can build modular and maintainable code using OOP principles.