JavaScript 007: Prototype

ImageSource

Introduction

In JavaScript, a prototype is an object that acts as a template for creating other objects.

When we create a new object, we can specify the object’s prototype, which determines the new object’s properties and methods. This allows us to create objects that share the same characteristics, without having to define the characteristics for each object individually.

For example, we could use a prototype to define the properties and methods for a particular type of car, and then use that prototype to create multiple objects that represent specific cars. Each of these objects would have the same properties and methods as the prototype, but we could also add or modify properties and methods on an individual basis to create objects that are unique.

How prototype is different than class object?

In JavaScript, a `class` is a syntax for defining reusable objects, whereas a `prototype` is a property of an object that specifies the object’s parent.

The `class` syntax provides a more concise and intuitive way to create objects and define their properties and methods. It also provides support for inheritance, allowing us to create subclasses of objects that inherit from their parent class.

In contrast, the `prototype` property is used to specify the parent object for an individual object, but it does not provide any additional features for defining or inheriting from classes.

Here is an example that shows the syntax for defining a class in JavaScript:

class Car {
  constructor(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
  }

  getDetails() {
    return this.year + ' ' + this.make + ' ' + this.model;
  }
}

// You can use the class to create new objects.
var car = new Car('Toyota', 'Camry', 2020);
console.log(car.getDetails()); // Output: 2020 Toyota Camry

In this example, we defined a `Car` class using the `class` syntax. The `Car` class has a `constructor` method and a `getDetails` method. We then used the `Car` class to create a new `Car` object, and called the `getDetails` method on that object.

In contrast, here is an example of how we would use the `prototype` property to achieve the same result:

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

// Define the prototype for the Car object.
Car.prototype.getDetails = function() {
  return this.year + ' ' + this.make + ' ' + this.model;
};

// Create a new Car object using the Car prototype.
var car = new Car('Toyota', 'Camry', 2020);

// You can access the methods defined on the prototype
// using the object you created.
console.log(car.getDetails()); // Output: 2020 Toyota Camry

In this example, we defined a `Car` object using a regular function, and then set the object’s `prototype` property to specify that it should inherit from the `Car.prototype` object. We then used the `Car` object to create a new `Car` instance, and called the `getDetails` method defined on the prototype.

As we can see, both examples achieve the same result, but the `class` syntax is simpler and more intuitive. Additionally, the `class` syntax allows us to easily create subclasses that inherit from their parent class, which is not possible using the `prototype` property alone.

I hope you enjoyed this introduction to Prototype!

Follow me: LinkedIn, Twitter