JavaScript Prototypes and Inheritance: Essential Interview Prep

Understanding prototypes and inheritance in JavaScript is crucial for anyone preparing for technical interviews. Prototypes form the foundation of JavaScript’s inheritance model, allowing objects to inherit properties and methods from other objects. Interviewers often ask about prototypes and inheritance to gauge your understanding of object-oriented programming (OOP) concepts in JavaScript, so it’s essential to master these topics.

In this article, we’ll dive deep into the concepts of prototypes and inheritance in JavaScript, explore the prototype chain, and review common interview questions and answers to help you confidently tackle these topics in your next interview.

What is a Prototype in JavaScript?

In JavaScript, every object has an internal property called [[Prototype]], which points to another object from which it can inherit properties. This is known as prototypal inheritance. When you try to access a property on an object and it doesn’t exist on that object, JavaScript will look for the property on the object’s prototype. This chain of prototypes continues until it reaches null, which signifies the end of the prototype chain.

Example of Prototypal Inheritance:

const person = {
  greet: function() {
    console.log('Hello!');
  }
};

const student = Object.create(person); // student inherits from person
student.greet(); // Output: 'Hello!'

In the example above:

• student doesn’t have a greet method, but its prototype is the person object, which does. Therefore, when you call student.greet(), it works through inheritance.

The Prototype Chain

The prototype chain is the mechanism by which JavaScript objects inherit features from one another. Every JavaScript object (except the base Object) has a prototype. If the property or method is not found on the object, JavaScript looks for it up the prototype chain.

Prototype Chain Example:

function Animal() {}
Animal.prototype.speak = function() {
  console.log("Animal speaks");
};

function Dog() {}
Dog.prototype = Object.create(Animal.prototype); // Dog inherits from Animal

Dog.prototype.bark = function() {
  console.log("Dog barks");
};

const myDog = new Dog();
myDog.bark(); // Output: 'Dog barks'
myDog.speak(); // Output: 'Animal speaks' (inherited from Animal)

In this example:

• myDog inherits from Dog.prototype, which in turn inherits from Animal.prototype. This is the prototype chain.
• When you call myDog.speak(), the interpreter doesn’t find speak on myDog, so it looks up the prototype chain and finds it on Animal.prototype.

Prototype vs. __proto__

It’s important to distinguish between the prototype of a function and the __proto__ property of an object. Every function in JavaScript has a prototype property, which is used when creating new objects via the new keyword. On the other hand, every object instance has a __proto__ property that points to its prototype.

Example:

function Person() {}

const personInstance = new Person();
console.log(Person.prototype); // Points to the prototype object of Person
console.log(personInstance.__proto__); // Points to Person.prototype

• Person.prototype is the object that will be assigned as the __proto__ of instances created with the new Person() constructor.
• personInstance.__proto__ points to Person.prototype.

Inheritance in JavaScript

JavaScript uses prototypal inheritance, meaning objects can inherit properties and methods from other objects. There are different ways to implement inheritance in JavaScript, including constructor functions, Object.create(), and ES6 classes.

1. Constructor Function Inheritance

Before ES6, JavaScript used constructor functions to define objects and their inheritance. You can use constructor functions along with new to create new objects that inherit from other objects.

Example:

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

Parent.prototype.sayName = function() {
  console.log(`My name is ${this.name}`);
};

function Child(name, age) {
  Parent.call(this, name); // Inherit properties
  this.age = age;
}

// Inherit methods
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

const child = new Child("Alice", 25);
child.sayName(); // Output: 'My name is Alice'

In this example:

• Inheritance of properties is done by calling the parent constructor (Parent.call(this, name)).
• Inheritance of methods is achieved by setting Child.prototype to an object created from Parent.prototype.

2. Object.create() Inheritance

Object.create() is a simpler way to implement inheritance. It allows you to create a new object and set its prototype to another object.

Example:

const parentObject = {
  greet: function() {
    console.log("Hello from parent!");
  }
};

const childObject = Object.create(parentObject);
childObject.greet(); // Output: 'Hello from parent!'

Here, childObject inherits from parentObject, gaining access to the greet method.

3. ES6 Class Inheritance

With the introduction of ES6, JavaScript provides a class syntax to create objects and handle inheritance. Under the hood, it still uses prototypes, but the syntax is more concise and readable.

Example:

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Rex');
dog.speak(); // Output: 'Rex barks'

In this example:

• Dog extends Animal, inheriting its properties and methods.
• The Dog class overrides the speak method, providing its own implementation.

Common Interview Questions on JavaScript Prototypes and Inheritance

1. Explain the Prototype Chain in JavaScript.

In JavaScript, when you access a property or method on an object, the engine first looks for that property on the object itself. If it doesn’t find it, the engine looks at the object’s prototype (i.e., the __proto__ property). This process continues up the chain until the property is found or the chain reaches null.

This concept is called the prototype chain, and it is how inheritance works in JavaScript.

Example Answer:

In the prototype chain, if a property or method isn’t found on the object, JavaScript searches the prototype of the object (set via Object.create() or through a constructor). The chain continues up to Object.prototype, which is the root of all objects in JavaScript. If the property is still not found, null is reached, and undefined is returned.

2. What is the difference between classical inheritance and prototypal inheritance?

• Classical inheritance (like in Java or C++) is based on classes, which define the structure of objects. Objects are instantiated from these classes, and inheritance is achieved through extending these classes.
• Prototypal inheritance (used by JavaScript) is based on objects. New objects can inherit directly from other objects using prototypes. There is no concept of classes; objects are linked to other objects via the prototype chain.

Example Question:

How do you implement inheritance in JavaScript using Object.create()?

Example Answer:

You can implement inheritance by creating a new object with Object.create() and setting the prototype of the new object to the object you want to inherit from. This allows the new object to access all properties and methods of its prototype.

const parent = {
  greet: function() {
    console.log("Hello from parent");
  }
};

const child = Object.create(parent);
child.greet(); // Output: 'Hello from parent'

3. What is the role of constructor in JavaScript inheritance?

In JavaScript, the constructor is a special method used to initialize an object’s properties. When using prototypal inheritance, you can manually set the constructor of an object to point to its own constructor function, ensuring that instances are properly linked to their constructors.

Example Question:

How do you ensure that the constructor points to the correct function after inheritance?

Example Answer:

When you set up inheritance using Object.create(), the child’s constructor gets overridden. You can manually set the constructor property on the prototype to point back to the correct constructor:

function Parent() {}
function Child() {}

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child; // Set the constructor back to Child

4. How does new work in JavaScript?

The new keyword in JavaScript is used to create an instance of an object from a constructor function. It performs the following steps:

1. Creates a new empty object.
2. Sets the __proto__ of the new object to the prototype of the constructor function.
3. Executes the constructor function with the this keyword set to the new object.
4. Returns the newly created object.

Example Question:

What happens when you use the new keyword with a constructor function in JavaScript?

Example Answer:

When you use new, a new object is created, and its prototype is set to the constructor function’s prototype. The constructor function is called with the this value set to the new object, and any properties or methods added to this within the constructor are assigned to the new object.

Common Mistakes to Avoid in Interviews

• Confusing prototype and __proto__: These terms have different meanings. The prototype property belongs to constructor functions, while __proto__ belongs to objects and points to their prototype.
• Not resetting the constructor after inheritance: Forgetting to reset the constructor when using Object.create() can lead to errors in identifying the constructor of an object.
• Misunderstanding how new works: Be clear on the steps the new keyword performs and how it links objects to their prototypes.

FAQs

What is the purpose of the Object.create() method in JavaScript?
Object.create() is used to create a new object with a specified prototype. It is a simple way to implement inheritance without using constructors.

How does JavaScript handle method overriding in prototypes?
If an object has a method with the same name as a method in its prototype, the object’s method overrides the prototype’s method.

Why should you reset the constructor property after using Object.create()?
By default, using Object.create() sets the constructor property to the parent’s constructor. Resetting it ensures that instances point to their correct constructor.

Conclusion

Mastering prototypes and inheritance in JavaScript is essential for any developer preparing for technical interviews. These concepts form the backbone of JavaScript’s object-oriented system, and understanding them will help you confidently answer interview questions and solve real-world problems.

Remember to practice inheritance patterns, understand the prototype chain, and be clear about the differences between classical and prototypal inheritance. With these concepts solidified, you’ll be ready to tackle any JavaScript interview with confidence.