Prototype Inheritance: Understanding the Basics

JavaScript is a prototype-based language, which means that it uses a mechanism called Prototype Inheritance to create new objects. Prototype Inheritance allows an object to inherit properties and methods from another object, known as its prototype.

In this article, we’ll explore the basics of Prototype Inheritance in JavaScript, and provide examples of how to use it in your code.

What is a Prototype in JavaScript?

In JavaScript, every object has a prototype. A prototype is a set of properties and methods that an object can inherit. The prototype is stored in the __proto__ property of the object.

When you create a new object in JavaScript, the __proto__ property is set to the prototype of the constructor function that was used to create the object. For example, consider the following code:

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

var john = new Person("John");

In this code, we’ve created a constructor function called Person, which we then use to create a new object called john. Because john was created using the Person constructor function, its __proto__ property is set to Person.prototype.

console.log(john.__proto__ === Person.prototype); // true

In this example, Person.prototype is the prototype of the Person constructor function. Any objects created using the Person constructor function will inherit properties and methods from Person.prototype.

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

john.sayHello(); // "Hello, my name is John"

Here, we’ve added a method called sayHello to Person.prototype. This method is now available to any objects created using the Person constructor function.

How to Use Prototype Inheritance in JavaScript

To create a new object that inherits from an existing object, you can use the Object.create() method. The Object.create() method takes a single argument, which is the object that will be used as the new object’s prototype.

For example, consider the following code:

var person = {
  sayHello: function() {
    console.log("Hello!");
  }
};

var john = Object.create(person);
john.name = "John";

john.sayHello(); // "Hello!"

In this code, we’ve created a new object called person with a method called sayHello. We then create a new object called john using Object.create(person). Because john was created using Object.create(), its __proto__ property is set to person.

console.log(john.__proto__ === person); // true

Finally, we add a name property to john. When we call john.sayHello(), JavaScript looks for the sayHello() method on john, but it doesn’t find it. It then looks for sayHello() on john‘s prototype (person), and finds it there.
One type of question generally asked in interview is below

  let person = {
    name: 'tom',
    track: true,
    rest() {
      return 5
    },
    sing() {
      if (this.track) {
        return `I am ${this.name}, the breed of singer`
      }
    }
  }


  let coder = {
    name: 'jully',
    rest() {
      return 1
    }
  }
    
  coder.__proto__ = person;
  console.log(person.isPrototypeOf(coder));
  const coderFire = person.sing.bind(coder)
  console.log(coderFire());
  console.log(coder.track);

Output:
  true
  I am jully, the breed of singer
  true

In above code, we have two objects: person and coder.

The person object has properties such as name and track along with methods such as rest() and sing().

The coder object has a name property and a rest() method.

The line coder.__proto__ = person sets the coder object’s prototype to the person object.

The isPrototypeOf() method is then called on the person object to check if it is a prototype of the coder object. This method returns true, indicating that person is indeed the prototype of coder.

The bind() method is used on the sing() method of the person object and the coder object is passed as an argument to it. This creates a new function coderFire which has the same functionality as person.sing() but with the this keyword pointing to the coder object.

The console.log(coderFire()) statement then logs the result of the coderFire() function, which returns a string indicating the name and type of the coder object.

Finally, the console.log(coder.track) statement logs the value of the track property of the coder object, which is true since it was inherited from the person object.

Prototype Inheritance is a powerful mechanism in JavaScript that allows you to create new objects that inherit properties and methods from existing objects. By using Prototype Inheritance, you can write code that is more modular and easier to maintain.