Overview

Prototypal inheritance is a fundamental concept in JavaScript, enabling objects to inherit properties and methods from other objects. Instead of classical inheritance where classes inherit from other classes, JavaScript uses prototypes—a more flexible, object-oriented approach that allows objects to directly inherit from other objects.

Key Concepts

1. Prototype Chain: The mechanism that allows an object to inherit properties and methods from another object.
2. Object.create: A method to create a new object that inherits from a specified prototype object.
3. Constructor Functions: Functions used to create new objects, where the new object inherits from the constructor's prototype.

Common Interview Questions

Basic Level

1. What is prototypal inheritance in JavaScript?
2. How do you create an object that inherits from another object?

Intermediate Level

3. How does the prototype chain work?

Advanced Level

4. How can you implement inheritance without using class syntax in JavaScript?

Detailed Answers

1. What is prototypal inheritance in JavaScript?

Answer: Prototypal inheritance is a feature in JavaScript where objects can inherit properties and methods from other objects. This is achieved through the prototype chain, allowing objects to access properties of their prototype, up to the Object.prototype which is the top of the chain.

Key Points:
- Each object in JavaScript has a property called prototype from which it can inherit methods and properties.
- Unlike class-based languages, inheritance in JavaScript is achieved through objects, not classes.
- The __proto__ property (or the standardized Object.getPrototypeOf()) can be used to access an object's prototype, though direct manipulation is generally discouraged.

Example:

// Creating a base object
const animal = {
  eat: true
};

// Creating a new object that inherits from the animal
const rabbit = Object.create(animal);
rabbit.jump = true;

console.log(rabbit.eat); // true, inherited from animal
console.log(rabbit.jump); // true, own property

2. How do you create an object that inherits from another object?

Answer: You can create an object that inherits from another object using the Object.create() method. This method creates a new object and sets the prototype of the new object to the object passed as its first argument.

Key Points:
- Object.create() is a standard way to set up prototypal inheritance.
- The new object inherits properties and methods from the prototype object specified.
- The second argument to Object.create() can specify properties for the new object.

Example:

// Defining a prototype object
const personPrototype = {
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

// Creating a new object that inherits from personPrototype
const person1 = Object.create(personPrototype, {
  name: { value: "John" }
});

person1.greet(); // Output: "Hello, my name is John"

3. How does the prototype chain work?

Answer: The prototype chain is a mechanism that allows an object to inherit properties and methods from another object. When a property or method is accessed on an object, JavaScript first searches the object itself. If not found, it searches the object’s prototype, then the prototype’s prototype, and so on, until it finds the property/method or reaches the end of the chain (typically Object.prototype which is the root prototype).

Key Points:
- The prototype chain provides a way to achieve inheritance and property/method sharing.
- If a property is not found anywhere in the chain, undefined is returned.
- Circular references in the prototype chain are not allowed and will throw an error.

Example:

const grandparent = { hair: 'grey' };
const parent = Object.create(grandparent);
const child = Object.create(parent);

console.log(child.hair); // grey, found up the prototype chain

4. How can you implement inheritance without using class syntax in JavaScript?

Answer: Inheritance in JavaScript can be implemented using constructor functions and the Object.create() method. Constructor functions allow you to create objects with a specific prototype, and Object.create() lets you set the prototype of an object.

Key Points:
- Constructor functions are a traditional way to create objects and implement inheritance.
- The prototype of constructor functions can be used to share methods across instances.
- Object.create() provides a more direct way to create an object with a specific prototype.

Example:

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

Animal.prototype.speak = function() {
  console.log(this.name + ' makes a noise.');
}

function Dog(name) {
  Animal.call(this, name); // Call the parent constructor with the current context
}

Dog.prototype = Object.create(Animal.prototype); // Inherit from Animal
Dog.prototype.constructor = Dog; // Set the constructor property to Dog

Dog.prototype.speak = function() {
  console.log(this.name + ' barks.');
}

var dog = new Dog('Rex');
dog.speak(); // Rex barks.

This example demonstrates how to set up inheritance without using ES6 class syntax, utilizing constructor functions and Object.create() to achieve prototypal inheritance.