JavaScript Object-Oriented Programming and Prototypes

JavaScript is a prototype-based object-oriented programming language. In object-oriented programming, code is structured into objects that bundle related data and functions together.

 

Object Creation and Properties

Objects contain properties and methods, and prototypes are used for object inheritance.

 

Objects in JavaScript are created by enclosing them in curly braces ({}) and can contain properties and methods. Properties serve as variables within an object, while methods function as functions within an object.

// Object creation
let person = {
  name: "Isaac",
  age: 23,
  sayHello: function() {
    console.log("Hello!");
  }
};

// Accessing object properties
console.log(person.name); // Output: Isaac

// Calling object methods
person.sayHello(); // Output: Hello!

 

Prototypes

In JavaScript, every object has a prototype object that serves as its parent.

Objects can access properties and methods of their prototype as if they were their own. This allows for inheritance and the establishment of relationships between objects. The prototype is stored in the prototype property of the object constructor function.

Prototypes enable inheritance and property sharing among objects in JavaScript. By defining a prototype in the prototype property of an object constructor function, objects can use the properties and methods of the prototype as if they were their own. Additionally, through the prototype chain, objects can form inheritance relationships, enhancing code reusability and maintainability.

 

Prototype Chain

Prototypes reference other objects, and when an object searches for a property or method, it first looks for it in its own prototype. If not found, it continues searching in its prototype's prototype, and so on. This process is called the prototype chain. Through the prototype chain, objects can form inheritance relationships, and lower-level objects inherit properties and methods from higher-level objects.

Using Prototypes

// Definition of the Person object constructor function
function Person(name) {
  this.name = name;
}

// Adding the sayHello method to the Person prototype
Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
};

// Creating a Person object
let person = new Person("Isaac");

console.log(person.name); // Output: Isaac
person.sayHello(); // Output: Hello, my name is Isaac

The person object is created using the Person function as a constructor. Accessing the name property of the person object can be done as if it were its own property. Similarly, the sayHello method can be invoked as if it were its own method. This is the result of inheriting the properties and methods defined in Person.prototype through the prototype chain.

 

Inheritance

JavaScript implements inheritance through the prototype chain.

 

An object's prototype references another object, allowing lower-level objects to inherit properties and methods from higher-level objects.

Here is an example code that demonstrates inheritance.

// Parent class: Vehicle
class Vehicle {
  constructor(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
  }

  start() {
    console.log(`The ${this.make} ${this.model} starts.`);
  }

  stop() {
    console.log(`The ${this.make} ${this.model} stops.`);
  }
}

// Child class: ElectricCar
class ElectricCar extends Vehicle {
  constructor(make, model, year, range) {
    super(make, model, year);
    this.range = range;
  }

  charge() {
    console.log(`The ${this.make} ${this.model} is charging.`);
  }
}

// Child class: GasolineCar
class GasolineCar extends Vehicle {
  constructor(make, model, year, fuelType) {
    super(make, model, year);
    this.fuelType = fuelType;
  }

  refuel() {
    console.log(`The ${this.make} ${this.model} is refueling.`);
  }
}

// Object creation
const tesla = new ElectricCar("Tesla", "Model 3", 2022, 400);
const bmw = new GasolineCar("BMW", "X5", 2021, "Gasoline");

// Method invocation
tesla.start();
tesla.charge();
tesla.stop();

bmw.start();
bmw.refuel();
bmw.stop();

The Vehicle class is the parent class for all vehicles, and the ElectricCar and GasolineCar classes inherit from the Vehicle class, adding their specific characteristics.

The ElectricCar class adds the charge method to represent the charging functionality of an electric car, and the GasolineCar class adds the refuel method to represent the refueling functionality of a gasoline car.

By utilizing inheritance, common functionality can be defined in the parent class once, and the child classes can implement additional features.

In the provided code, although each vehicle has different capabilities, they all inherit and use the start and stop methods defined in the parent class. This way, common functionality is implemented once in the parent class and can be immediately used by the child classes.

Based on the method invocations of each object, the corresponding output represents the actions of the vehicles.

The Tesla Model 3 starts.
The Tesla Model 3 is charging.
The Tesla Model 3 stops.

The BMW X5 starts.
The BMW X5 is refueling.
The BMW X5 stops.

The tesla object is an instance of the ElectricCar class, allowing it to invoke the start, charge, and stop methods. The bmw object is an instance of the GasolineCar class, enabling it to invoke the start, refuel, and stop methods.