Prototype

Every JavaScript object has an internal link to another object called its prototype. This prototype object can have its own prototype, forming a chain. This is how JavaScript implements inheritance.

The Prototype Property

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

// Add method to prototype
Person.prototype.greet = function() {
  return `Hello, I'm ${this.name}`;
};

const alice = new Person('Alice');
const bob = new Person('Bob');

console.log(alice.greet()); // 'Hello, I'm Alice'
console.log(bob.greet());   // 'Hello, I'm Bob'

// They share the same method
console.log(alice.greet === bob.greet); // true

How new Works

// When you call new Person('Alice'):
// 1. A new empty object is created: {}
// 2. The object's [[Prototype]] is set to Person.prototype
// 3. The constructor is called with 'this' bound to the new object
// 4. The new object is returned

function Person(name) {
  this.name = name; // Step 3
}

const alice = new Person('Alice');
// Steps 1, 2, 4 happen implicitly

Checking Prototypes

const alice = new Person('Alice');

// Check if object has property directly
console.log('name' in alice);           // true
console.log(alice.hasOwnProperty('name')); // true

// Check prototype
console.log('greet' in alice);           // true (from prototype)
console.log(alice.hasOwnProperty('greet')); // false

// Get prototype
console.log(Object.getPrototypeOf(alice) === Person.prototype); // true

You can add methods and properties to prototypes to share them across instances.

Adding Methods

function Car(make, model) {
  this.make = make;
  this.model = model;
}

// Add method to prototype
Car.prototype.start = function() {
  return `${this.make} ${this.model} started`;
};

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

const myCar = new Car('Toyota', 'Camry');
console.log(myCar.start()); // 'Toyota Camry started'
console.log(myCar.wheels);  // 4

Modifying Built-in Prototypes

// Add useful methods to Array prototype
Array.prototype.last = function() {
  return this[this.length - 1];
};

Array.prototype.isEmpty = function() {
  return this.length === 0;
};

const arr = [1, 2, 3];
console.log(arr.last());    // 3
console.log([].isEmpty()); // true

// WARNING: Modifying built-ins is generally discouraged
// It can cause conflicts with future JS features

Prototype vs Instance Properties

function Dog(name) {
  this.name = name; // Instance property (unique to each)
}

Dog.prototype.species = 'Canine'; // Prototype property (shared)

const rex = new Dog('Rex');
const fido = new Dog('Fido');

// Instance properties are unique
console.log(rex.name);  // 'Rex'
console.log(fido.name); // 'Fido'

// Prototype properties are shared
console.log(rex.species);  // 'Canine'
console.log(fido.species); // 'Canine'

// Modifying prototype affects all instances
Dog.prototype.species = 'Dog';
console.log(rex.species);  // 'Dog'
console.log(fido.species); // 'Dog'

Object.create() creates a new object with a specified prototype.

Basic Usage

const personProto = {
  greet() {
    return `Hello, I'm ${this.name}`;
  },
  toString() {
    return `Person: ${this.name}`;
  }
};

const alice = Object.create(personProto);
alice.name = 'Alice';
console.log(alice.greet()); // 'Hello, I'm Alice'

Creating with Properties

const carProto = {
  start() {
    return `${this.make} ${this.model} started`;
  }
};

const myCar = Object.create(carProto, {
  make: { value: 'Toyota', writable: true, enumerable: true },
  model: { value: 'Camry', writable: true, enumerable: true },
  year: { value: 2024, writable: false } // Read-only
});

console.log(myCar.start()); // 'Toyota Camry started'
console.log(myCar.year);    // 2024

Inheritance with Object.create

const animal = {
  eat() {
    return 'Eating...';
  },
  sleep() {
    return 'Sleeping...';
  }
};

const dog = Object.create(animal);
dog.bark = function() {
  return 'Woof!';
};

const rex = Object.create(dog);
rex.name = 'Rex';

console.log(rex.bark());  // 'Woof!'
console.log(rex.eat());   // 'Eating...'
console.log(rex.sleep()); // 'Sleeping...'

Prototype Chain with Object.create

const base = { type: 'base' };
const child = Object.create(base);
child.name = 'child';
const grandchild = Object.create(child);

console.log(grandchild.type); // 'base' (from base)
console.log(grandchild.name); // 'child' (from child)

// Check chain
console.log(Object.getPrototypeOf(child) === base);         // true
console.log(Object.getPrototypeOf(grandchild) === child);  // true