Introduction to Object-Oriented Programming in JavaScript
Object-oriented programming (OOP) is a programming paradigm that is based on the concept of “objects”, which can contain data and code that manipulates that data. In OOP, objects are created from templates called “classes”, which define their properties and behaviors.
JavaScript is an object-oriented programming language, and it has several features that support OOP, including:
Classes: JavaScript classes are templates for creating objects. They define the properties and behaviors that the objects will have.
JavaScript classes are a powerful tool for developers, offering the ability to create intuitive object blueprints with reusable code. Classes enable use of constructors, static methods and access modifiers that make it simpler to create objects from templates. To declare a class in JavaScript all you have to do is write “class” followed by your desired name and enclose the body within curly braces. With classes you can now easily design complex applications that save time as well as effort!
Classes can have two types of members: static and instance. Static members are shared between all instances of the class, while instance members are unique to each instance.
Classes can also have a constructor, which is a special function that is called when javascript object is created. Constructors can be used to set initial values for instance members.
Ultimately, classes can also include access modifiers to control how a class’s members are accessed by other pieces of code. These keywords restrict the access that third-party programs have to certain elements within the class and ensure only specified people or processes can view them.
class Car {
constructor(make, model) {
this.make = make;
this.model = model;
}
static getManufacturer(){
return 'Toyota';
}
getInfo(){
return `This car is a ${this.make} ${this.model}`
}
}
let myCar = new Car('Toyota', 'Camry');
console.log(myCar.getInfo()); // This car is a Toyota Camry
console.log(Car.getManufacturer()); // Toyota
JavaScript Constructors:
A constructor is a special method that is called when an object is created from a class. Constructors can be used to initialize the properties of the object.
A constructor in JavaScript is a particular procedure for instantly creating and deploying an object developed within a class. Whenever the constructor is used, it will instantaneously generate an entity from its respective class that can be ascribed to this keyword’s value. The constructor, always named “constructor”, is the only method that will be called once an object has been built using the new keyword. This constructor can set properties and execute tasks when given parameters which in turn sets values of these objects’ properties.
class Polygon {
constructor(height, width) {
this.name = 'Polygon';
this.height = height;
this.width = width;
}
}
Inheritance in JavaScript
JavaScript objects can acquire properties and behaviors from other objects through an innovative process we call “prototypal inheritance“. This approach enables you to construct a hierarchical arrangement of objects that are bound by common characteristics.
The basic idea is that a “parent” object is created, and then “child” objects can inherit from it. For instance, if you create an object called Vehicle, you can then create objects for cars and motorcycles, which will inherit certain properties from the parent object.
Here is an example.
var Vehicle = {
wheels: 4,
drive: function(){
console.log("Vroom Vroom!");
}
};
var Car = Object.create(Vehicle);
Car.doors = 4;
Car.color = "red";
var Motorcycle = Object.create(Vehicle);
Motorcycle.seats = 2;
Motorcycle.color = "blue";
Car.drive(); // "Vroom Vroom!"
Motorcycle.drive(); // "Vroom Vroom!"
Encapsulation in JavaScript
Encapsulation is another important feature of object-oriented programming. By encapsulating data and behavior within an object, you can ensure that only authorized code has access to the object’s properties and methods
Encapsulation also makes it easier to manage an object’s state, since the object’s methods are responsible for updating the object’s state. An object’s methods can also provide validation or security features that make sure the object is in a valid state before performing an operation
class User {
private String name;
private int age;
private String password;
// Getters and setters
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
if (age > 0 && age < 120) {
this.age = age;
}
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
if (password.length() > 8) {
this.password = password;
}
}
}
Polymorphism in JavaScript
Polymorphism is another core concept of OOP. It allows objects of different classes to respond differently to the same input, and it allows you to write code that is more flexible and reusable
The most basic type of polymorphism in JavaScript is function overloading. This is when a function is declared multiple times, with different arguments. This allows the same function to perform a different action depending on the type or number of arguments passed to it.
function Vehicle(wheels, engine){
this.wheels = wheels;
this.engine = engine;
}
// Overloading the Vehicle function
function Vehicle(wheels, engine, doors){
this.wheels = wheels;
this.engine = engine;
this.doors = doors;
}
// Using the Vehicle function
var car = new Vehicle(4, 'petrol', 4);
var bike = new Vehicle(2, 'petrol');
Conclusion
Mastering the building blocks of JavaScript Object-Oriented Programming will elevates your code to a new level. Once you understand how to use these concepts in practice, you’ll be capable of producing sophisticated and efficient code that excels at solving any problem. As an added bonus, your codebase is certain to remain clean and maintainable for years into the future!
