Prototypes and Prototypal Inheritance in JavaScript

Prototypes and Prototypal Inheritance in JavaScript

JavaScript uses prototypal inheritance: objects inherit from other objects via the prototype chain.

What Is a Prototype?

Every object has a hidden [[Prototype]] property that points to another object (its prototype). When you access a property, JS checks the object first, then its prototype, then the prototype's prototype, up to null.

The Prototype Chain

const animal = { eat: () => "eating" };
const dog = Object.create(animal);
dog.bark = () => "barking";
dog.eat(); // "eating" (inherited from animal)
dog.bark(); // "barking" (own property)

Constructor Functions

function Person(name) { this.name = name; }
Person.prototype.greet = function () { return `Hello, ${this.name}`; };
const p = new Person("Kunal");
p.greet(); // "Hello, Kunal" (inherited from Person.prototype)

ES6 Classes

class Person {
  constructor(name) { this.name = name; }
  greet() { return `Hello, ${this.name}`; }
}
class Student extends Person {
  constructor(name, grade) { super(name); this.grade = grade; }
}

Key Methods

• Object.create(proto): create an object with a specific prototype.
• Object.getPrototypeOf(obj): get the prototype.
• Object.setPrototypeOf(obj, proto): set the prototype.
• obj.hasOwnProperty(key): check if a property is own (not inherited).
• obj instanceof Constructor: check the prototype chain.

The Takeaway

Prototypal inheritance: objects inherit from objects via the prototype chain. Use Object.create for direct inheritance, constructor functions with Person.prototype, or ES6 classes (extends). The prototype chain is how JS resolves properties.