Clean • Professional
In JavaScript, prototypes and inheritance form the foundation of the language’s object-oriented behavior. Every JavaScript object is linked to another object, called its prototype, from which it can inherit properties and methods.
This system is known as prototypal inheritance, and it allows objects to share behavior efficiently without duplicating code.
A prototype is an object from which other objects inherit properties and methods.
Every JavaScript object has an internal link ([[Prototype]]) that points to another object — accessible through the special property __proto__ or via Object.getPrototypeOf().
Example:
const person = {
greet() {
console.log("Hello!");
}
};
const student = Object.create(person);
student.study = function() {
console.log("Studying...");
};
student.greet(); // Inherited from person -> "Hello!"
student.study(); // Own method -> "Studying..."
When you access a property or method on an object:
null.Example:
If the property isn’t found even at the top of the chain (Object.prototype), it returns undefined.
console.log(student.__proto__ === person); // true
console.log(Object.getPrototypeOf(student) === person); // true
Constructor functions use the prototype property to define shared methods.
Example:
function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
console.log(`Hello, my name is ${this.name}`);
};
const alice = new Person("Alice");
alice.greet(); // "Hello, my name is Alice"
You can create inheritance using constructor functions and prototypes:
function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
console.log(`Hello, I'm ${this.name}`);
};
function Student(name, subject) {
Person.call(this, name); // Inherit properties
this.subject = subject;
}
// Inherit methods
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
Student.prototype.study = function() {
console.log(`${this.name} studies ${this.subject}`);
};
const bob = new Student("Bob", "Math");
bob.greet(); // "Hello, I'm Bob"
bob.study(); // "Bob studies Math"
ES6 introduced classes as syntactic sugar over prototypes.
extends → sets up the prototype chain automatically
super() → calls the parent constructor
Example:
class Person {
constructor(name) {
this.name = name;
}
greet() {
console.log(`Hello, I'm ${this.name}`);
}
}
class Student extends Person {
constructor(name, subject) {
super(name); // Calls parent constructor
this.subject = subject;
}
study() {
console.log(`${this.name} studies ${this.subject}`);
}
}
const alice = new Student("Alice", "Physics");
alice.greet(); // "Hello, I'm Alice"
alice.study(); // "Alice studies Physics"
At the top of all JavaScript objects is Object.prototype, which provides built-in methods like:
hasOwnProperty()toString()valueOf()Example:
console.log(Object.getPrototypeOf({}) === Object.prototype); // true
console.log(Object.getPrototypeOf(Object.prototype)); // null