The most common JavaScript prototype interview questions and answers (prototype, prototypal inheritance, prototype chain)

When we are learning JavaScript or preparing for an interview, prototype is often a concept that makes many people feel scared. Understanding the terms "proto", "prototype", "__proto__" is already confusing, but it is actually a high-frequency topic in interviews. This article will guide readers to understand these concepts and organize classic interview questions and answers.

What is prototype?

In JavaScript, each object contains an internal hidden property [[Prototype]], which corresponds to the prototype of that object, which may be null or point to another object. However, since [[Prototype]] is an internal property that cannot be accessed directly, the browser provides the __proto__ access method, which can be referenced in the following code.

But we need to pay attention that the __proto__ method is not in the ECMAScript specification. In fact, when developing, we will use Object.getPrototypeOf to get the prototype of the object.

// Person is a constructor function
function Person() {}

// Create a personA object through the Person constructor function
const personA = new Person();

// Through the __proto__ method, view the prototype of personA
console.log(personA.__proto__); // {constructor: ƒ}

// personA object can be accessed to its prototype through the __proto__ method
personA.__proto__ === Person.prototype; // true
Object.getPrototypeOf(personA) === Person.prototype; // true
personA.__proto__ === Object.getPrototypeOf(personA); // true

What is the difference between __proto__ and [[Prototype]]?

Followed by the previous question, [[Prototype]] is a special hidden property in JavaScript objects, but because it cannot be directly accessed, it can be accessed through the __proto__ access method.

What is the difference between __proto__ and prototype?

__proto__ and prototype are different properties. __proto__ is a hidden property of each object, and each object can access its prototype through __proto__. And prototype is a property that exists in all constructor functions, and the prototype of the constructor function is actually the same as the __proto__, which is called the prototype object. (See the following code)

// Person is a constructor function
function Person() {}

// Create a personA object through the Person constructor function
const personA = new Person();

personA.__proto__ === Person.prototype; // true

What is the prototype chain?

Prototype is a special hidden property in JavaScript objects, and each object can access its prototype through __proto__. The prototype itself is an object, so it also has its own prototype. When we try to access an attribute of an object, if the object does not have the required attribute, it will look for it in its prototype. If the prototype still does not find it, it will continue to look up one level until it is found, or until it reaches null. This continuous path is called the prototype chain, and the end of the chain is null.

personA.__proto__.__proto__.__proto__ === null;

For example, we often use the filter method of the array. Assuming that there is an array "list" now, and we use the filter method on this array. But in fact, the filter method does not exist in this list, but exists in the Array constructor function. We can use the filter method today through the prototype chain.

What is prototypal inheritance?

The prototype chain is a very important concept in JavaScript, but it is not enough to understand the prototype chain. To answer this question, we can understand it through why we need prototypal inheritance.

Assume that there is an object "animal", which has its own properties and methods. At the same time, we want to create two objects based on "animal", namely "cat" and "dog". These two objects will have some unique methods and properties, but at the same time need to use the methods and properties of the "animal" object. In JavaScript, we don't need to copy or reimplement it, but we can achieve this goal through prototypal inheritance.

To sum up, although the "cat" and "dog" objects themselves do not have the methods of the "animal" object, they can inherit the methods from their prototypes to use them. In practice, we will add properties or methods to the prototype. Then all objects that are instantiated from this object can use this method or property.

// Constructor function Animal
function Animal() {}

// Instance of Animal
const cat = new Animal();

// Add a method to the prototype object
Animal.prototype.sleep = function () {
  console.log("sleep");
};

// Use the method of the constructor function's prototype
cat.sleep(); // sleep