JavaScript Prototype Object

In this chapter, we will learn about the JavaScript prototype object. Prototypes are a fundamental feature in JavaScript that allows objects to inherit properties and methods from other objects. We will cover:

• What is a Prototype?
• The prototype Property
• Prototype Chain
• Inheriting Properties and Methods
• Adding Methods to a Prototype
• Simple Programs using Prototypes

What is a Prototype?

A prototype is an object from which other objects inherit properties and methods. In JavaScript, every object has a prototype, and an object’s prototype is also an object. This enables JavaScript to have a dynamic inheritance model.

The prototype Property

In JavaScript, functions (including constructor functions) have a prototype property. This property points to an object that will become the prototype for objects created by the constructor function.

Example

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

Person.prototype.getFullName = function() {
  return `${this.firstName} ${this.lastName}`;
};

let person = new Person("Ramesh", "Fadatare");
console.log(person.getFullName());

Output:

Ramesh Fadatare

Prototype Chain

The prototype chain is a mechanism by which one object inherits properties and methods from another object. When you try to access a property or method on an object, JavaScript first looks at the object itself. If the property or method is not found, JavaScript then looks at the object’s prototype, and so on, until it reaches the end of the prototype chain.

Example

let animal = {
  eats: true
};

let rabbit = Object.create(animal);
rabbit.jumps = true;

console.log(rabbit.eats); // inherited from animal
console.log(rabbit.jumps);

Output:

true
true

Inheriting Properties and Methods

Objects can inherit properties and methods from other objects using prototypes. This allows for code reuse and a dynamic inheritance model.

Example

function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  return `${this.name} makes a noise.`;
};

function Dog(name) {
  Animal.call(this, name); // Call the parent constructor
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.speak = function() {
  return `${this.name} barks.`;
};

let dog = new Dog("Tommy");
console.log(dog.speak());

Output:

Tommy barks.

Adding Methods to a Prototype

You can add methods to an object’s prototype to allow all instances of that object to share the same method.

Example

function Car(make, model) {
  this.make = make;
  this.model = model;
}

Car.prototype.displayInfo = function() {
  return `${this.make} ${this.model}`;
};

let car = new Car("Toyota", "Camry");
console.log(car.displayInfo());

Output:

Toyota Camry

Simple Programs using Prototypes

Program 1: Shape Inheritance using Prototypes

function Shape(color) {
  this.color = color;
}

Shape.prototype.getColor = function() {
  return this.color;
};

function Circle(color, radius) {
  Shape.call(this, color); // Call the parent constructor
  this.radius = radius;
}

Circle.prototype = Object.create(Shape.prototype);
Circle.prototype.constructor = Circle;

Circle.prototype.getArea = function() {
  return Math.PI * Math.pow(this.radius, 2);
};

let circle = new Circle("Red", 5);
console.log(circle.getColor());
console.log(circle.getArea());

Output:

Red
78.53981633974483

Program 2: Animal Sounds using Prototypes

function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  return `${this.name} makes a noise.`;
};

function Cat(name) {
  Animal.call(this, name);
}

Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;

Cat.prototype.speak = function() {
  return `${this.name} meows.`;
};

let cat = new Cat("Kitty");
console.log(cat.speak());

Output:

Kitty meows.

Program 3: Employee Details using Prototypes

function Employee(name, position) {
  this.name = name;
  this.position = position;
}

Employee.prototype.getDetails = function() {
  return `${this.name}, ${this.position}`;
};

function Manager(name, position, department) {
  Employee.call(this, name, position);
  this.department = department;
}

Manager.prototype = Object.create(Employee.prototype);
Manager.prototype.constructor = Manager;

Manager.prototype.getDetails = function() {
  return `${Employee.prototype.getDetails.call(this)}, Department: ${this.department}`;
};

let manager = new Manager("Ravi", "Manager", "IT");
console.log(manager.getDetails());

Output:

Ravi, Manager, Department: IT

Program 4: Library Management using Prototypes

function Book(title, author) {
  this.title = title;
  this.author = author;
}

Book.prototype.getDetails = function() {
  return `${this.title} by ${this.author}`;
};

function EBook(title, author, fileSize) {
  Book.call(this, title, author);
  this.fileSize = fileSize;
}

EBook.prototype = Object.create(Book.prototype);
EBook.prototype.constructor = EBook;

EBook.prototype.getDetails = function() {
  return `${Book.prototype.getDetails.call(this)}, File Size: ${this.fileSize} MB`;
};

let ebook = new EBook("The Alchemist", "Paulo Coelho", 2);
console.log(ebook.getDetails());

Output:

The Alchemist by Paulo Coelho, File Size: 2 MB

Program 5: Vehicle Management using Prototypes

function Vehicle(make, model) {
  this.make = make;
  this.model = model;
}

Vehicle.prototype.getDetails = function() {
  return `${this.make} ${this.model}`;
};

function Bike(make, model, type) {
  Vehicle.call(this, make, model);
  this.type = type;
}

Bike.prototype = Object.create(Vehicle.prototype);
Bike.prototype.constructor = Bike;

Bike.prototype.getDetails = function() {
  return `${Vehicle.prototype.getDetails.call(this)}, Type: ${this.type}`;
};

let bike = new Bike("Yamaha", "MT-15", "Sports");
console.log(bike.getDetails());

Output:

Yamaha MT-15, Type: Sports

Conclusion

In this chapter, you learned about the JavaScript prototype object, including the prototype property, prototype chain, inheriting properties and methods, and adding methods to a prototype. We also provided various use cases with simple programs to demonstrate the usage of prototypes. Understanding prototypes is essential for mastering JavaScript’s inheritance model and writing efficient, reusable code.