JavaScript Object Prototypes

Understanding the foundation of JavaScript inheritance

🔗 What are Object Prototypes?

Every JavaScript object has a prototype. A prototype is also an object that provides properties and methods that other objects can inherit. Think of it as a blueprint or template! 


// Every object has a prototype
let person = {name: "John"};
console.log(person.__proto__); // Shows the prototype

Output:

[object Object] (with built-in methods like toString, valueOf, etc.)

Key Prototype Concepts

🧬

Inheritance

Objects inherit from their prototype 

let animal = {sound: "noise"};
let dog = Object.create(animal);
console.log(dog.sound); // "noise"
🔧

Prototype Chain

Objects link to other objects 

// dog -> animal -> Object.prototype -> null
➕

Adding Methods

Add methods to all instances 

Array.prototype.last = function() {
  return this[this.length - 1];
};
🏗️

Constructor Functions

Create objects with prototypes 

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

🔹 Basic Prototype Example

Let's create a simple prototype chain: 

// Create a parent object
let animal = {
    type: "Animal",
    makeSound: function() {
        return "Some generic sound";
    }
};

// Create a child object that inherits from animal
let dog = Object.create(animal);
dog.breed = "Golden Retriever";
dog.makeSound = function() {
    return "Woof!";
};

console.log(dog.type);        // "Animal" (inherited)
console.log(dog.breed);       // "Golden Retriever" (own property)
console.log(dog.makeSound()); // "Woof!" (overridden method)

Output:

Animal
Golden Retriever
Woof!

🔹 Constructor Function Prototypes

When you create a constructor function, it automatically gets a prototype: 

// Constructor function
function Car(brand, model) {
    this.brand = brand;
    this.model = model;
}

// Add method to prototype (shared by all instances)
Car.prototype.start = function() {
    return this.brand + " " + this.model + " is starting!";
};

Car.prototype.wheels = 4; // Add property to prototype

// Create instances
let myCar = new Car("Toyota", "Camry");
let yourCar = new Car("Honda", "Civic");

console.log(myCar.start());    // "Toyota Camry is starting!"
console.log(yourCar.wheels);   // 4 (inherited from prototype)
console.log(myCar.wheels);     // 4 (inherited from prototype)

Output:

Toyota Camry is starting!
4
4

🔹 Prototype Chain in Action

JavaScript looks up the prototype chain to find properties: 

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

Animal.prototype.speak = function() {
    return this.name + " makes a sound";
};

function Dog(name, breed) {
    Animal.call(this, name); // Call parent constructor
    this.breed = breed;
}

// Set up inheritance
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// Add dog-specific method
Dog.prototype.bark = function() {
    return this.name + " barks loudly!";
};

let myDog = new Dog("Buddy", "Labrador");

console.log(myDog.name);    // "Buddy" (own property)
console.log(myDog.breed);   // "Labrador" (own property)
console.log(myDog.speak()); // "Buddy makes a sound" (inherited)
console.log(myDog.bark());  // "Buddy barks loudly!" (Dog prototype)

Output:

Buddy
Labrador
Buddy makes a sound
Buddy barks loudly!

🔹 Checking Prototypes

You can check and work with prototypes using built-in methods: 

let arr = [1, 2, 3];

// Check if object has property (own property only)
console.log(arr.hasOwnProperty('length')); // true
console.log(arr.hasOwnProperty('push'));   // false (it's in prototype)

// Check prototype chain
console.log(Array.prototype.isPrototypeOf(arr)); // true
console.log(Object.prototype.isPrototypeOf(arr)); // true

// Get prototype
console.log(Object.getPrototypeOf(arr) === Array.prototype); // true

// Check if property exists (own or inherited)
console.log('push' in arr);   // true
console.log('length' in arr); // true

Output:

true
false
true
true
true
true
true

🧠 Test Your Knowledge

What happens when you access a property that doesn't exist on an object?