JavaScript Prototypes Explained Simply

Introduction

JavaScript always follow prototype-based system , where objects inherit properties and methods from other objects .

What is Prototype ?

A prototype is an internal property of every JavaScript object that acts as a blueprint from which it can inherit properties and methods. This allows objects to share behavior without duplicating code.

Every function in JavaScript has a special property called prototype, which is an object itself. This object can have methods and properties that other objects (instances) inherit.

Let’s understand with an example :

In this case, animal has no ‘hasOwnProperty( )’ method . So, how can we access this property ? Because this is the in-built property of object. We’ll understand this more deeply in upcoming.

How Prototype Works :

In JavaScript everything is object and every object has its own property , called Prototype , which refers to another object . When you try to access the property or method of the object , it first looks into the object itself . If it’s not found , it looks in the object’s prototype , if it’s still not found, it moves to the prototype chain .

At the declaration of every function, the JavaScript engine adds the prototype object property to that function which makes the function a prototype that other versions can be created from.

Here we create a student object using person . So student should have those property that has the property of person.

Benefits of Prototype

Prototype makes it easy for function to keep only one copy of features which newer function has the access to use . That means the newly created function only focus on new features which they had need to access.

To understand this things , let's look at constructor functions, which is one way of creating objects.

What is a Constructor Function?

A constructor function is a regular JavaScript function, but by convention, its name starts with an uppercase letter to indicate it should be used with the new keyword.

Example of a simple Constructor function :

function Hello() {
    console.log("hello");
}

const anotherVersion = new Hello(); // Creates a new object
anotherVersion.type = "new"; // Adding a property to the instance

console.log(anotherVersion);

Output :

So, what happens when we use ‘new’ keyword ?

When we call a function with the new keyword, the following steps happen behind the scenes:

1. A new empty object is created: { }.

2. The new object’s internal [[Prototype]] is set to the constructor’s prototype property.

3. The constructor function (Hello( )) is called with this referring to the newly created object.

4. If the function does not explicitly return an object, this (the new object) is returned.

The above example doesn’t store any properties inside the object. Let’s modify it so that each instance has a unique property.

function Hello(name) {
    this.name = name; // Assigns a property to the new object
    console.log("hello");
}

const person1 = new Hello("Alice");
const person2 = new Hello("Bob");

console.log(person1.name); // Output: Alice
console.log(person2.name); // Output: Bob

Now, each instance (person1 and person2) has its own name property.

Using the Prototype for Shared Methods

In JavaScript, objects created using constructor functions can have methods inside the constructor or on the prototype. However, placing methods inside the constructor creates a new copy of the method for every instance, which is inefficient. Let’s see an example :

function Person(name) {
    this.name = name;
    this.greet = function() {
        console.log(`Hello, my name is ${this.name}`);
    };
}

const person1 = new Person("Alice");
const person2 = new Person("Bob");

console.log(person1.greet === person2.greet); // false

So , to solve this problem a better approach is to define methods on the prototype, so all instances share the same method.

function Person(name) {
    this.name = name; // Unique property for each instance
}

// Defining the greet() method on the prototype
Person.prototype.greet = function() {
    console.log(`Hello, my name is ${this.name}`);
};

const person1 = new Person("Alice");
const person2 = new Person("Bob");

person1.greet(); // Output: Hello, my name is Alice
person2.greet(); // Output: Hello, my name is Bob

console.log(person1.greet === person2.greet); // true

So, this is better because of the following reasons :

• greet() is defined once in Person.prototype, not inside each object.

• person1 and person2 share the same function, reducing memory usage.

• This follows the prototype chain, making the code more efficient.

How the Prototype Chain Works

When we call person1.greet(), JavaScript follows these steps:

1. JavaScript first looks inside person1 for the greet method.

2. Since greet is not found in person1, JavaScript looks in Person.prototype.

3. JavaScript finds greet in Person.prototype and executes it.

You can also add multiple methods to the prototype.

__proto__ vs prototype

prototype Property

• Exists only on constructor functions.

• Defines properties and methods to be inherited by instances.

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

Car.prototype.drive = function() {
    console.log(`${this.make} is driving`);
};

const myCar = new Car("Toyota");
myCar.drive(); // Output: Toyota is driving

__proto__ Property

• Exists on all objects.

• Points to the prototype object from which the instance was created.

console.log(myCar.__proto__ === Car.prototype); // true

Conclusion :

This is all about prototype in javascript . You can learn more about this topic and mastery in this topic is very important . I hope this article will be helpful for everyone .