Prototype

Prototype = inheritance mechanism in JavaScript

---

What is Prototype?

"Objects inherit from prototypes"

JavaScript uses prototype-based inheritance where objects inherit properties and methods from other objects.

"Prototypes are the mechanism by which JavaScript objects inherit features from other objects, enabling prototype-based inheritance."

---

Prototype Chain

Object → Prototype → Prototype → null

const obj = {};
// obj → Object.prototype → null

Every object has a link to a prototype object.

"The prototype chain allows objects to access properties and methods from their prototype, creating an inheritance chain."

---

proto vs prototype

**proto = instance link, prototype = constructor property**

Property	On	Purpose
__proto__	Instance	Link to prototype
prototype	Constructor	Defines prototype for instances

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

Person.prototype.greet = function () {
  return `Hello, ${this.name}`;
};

const john = new Person("John");
john.__proto__ === Person.prototype; // true

"proto is the instance's link to its prototype, while prototype is the constructor's property that defines what instances inherit."

---

Constructor Functions

Function + new = instance with prototype

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

Person.prototype.sayHello = function () {
  console.log(`Hello, ${this.name}`);
};

const john = new Person("John");
john.sayHello(); // Uses prototype method

"Constructor functions create instances that inherit from the constructor's prototype property."

---

Object.create()

Create object with specific prototype

const animal = {
  makeSound() {
    console.log("Sound");
  },
};

const dog = Object.create(animal);
dog.makeSound(); // Inherited

"Object.create creates a new object with a specified prototype, enabling prototype-based inheritance."

---

hasOwnProperty()

Check if property is own, not inherited

const obj = { name: "John" };
obj.hasOwnProperty("name"); // true
obj.hasOwnProperty("toString"); // false (inherited)

"hasOwnProperty checks if a property belongs to the object itself, not inherited from prototype."

---

Prototype Inheritance

Child inherits from parent

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

Animal.prototype.eat = function () {
  console.log(`${this.name} eats`);
};

function Dog(name) {
  Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function () {
  console.log("Woof!");
};

"Prototype inheritance allows child constructors to inherit from parent constructors by setting up the prototype chain."

---

ES6 Classes

Syntactic sugar over prototypes

class Animal {
  constructor(name) {
    this.name = name;
  }

  eat() {
    console.log(`${this.name} eats`);
  }
}

class Dog extends Animal {
  bark() {
    console.log("Woof!");
  }
}

Classes are syntactic sugar - they still use prototypes under the hood.

"ES6 classes are syntactic sugar over prototype-based inheritance, making it more familiar to developers from class-based languages."

---

9️⃣ Method Overriding

Child can override parent methods

class Animal {
  makeSound() {
    console.log("Generic sound");
  }
}

class Dog extends Animal {
  makeSound() {
    console.log("Woof!"); // Overrides parent
    super.makeSound(); // Call parent
  }
}

"Child classes can override parent methods, and use super to call the parent method."

---

Prototype vs Class

Prototype = underlying, Class = syntax

• Classes compile to prototype-based code
• Both achieve inheritance
• Classes are easier to read
• Prototypes are more flexible

"Classes provide cleaner syntax, but JavaScript still uses prototype-based inheritance under the hood."

---

"JavaScript uses prototype-based inheritance where objects inherit from prototypes. The prototype chain allows property lookup up the chain. Constructor functions use the prototype property, instances use proto. Object.create creates objects with specific prototypes. ES6 classes are syntactic sugar over prototypes. hasOwnProperty distinguishes own properties from inherited ones."

---

🧠 Ultra-Short Cheat Sheet

Prototype-based inheritance
Prototype chain
__proto__ (instance)
prototype (constructor)
Object.create()
hasOwnProperty()
ES6 classes = syntactic sugar
Method overriding