JavaScript Prototypes and Inheritance

// Every object has a prototype
const obj = {};
console.log(obj.__proto__); // Points to Object.prototype
console.log(Object.getPrototypeOf(obj)); // Same, preferred method

// Prototype chain
const arr = [1, 2, 3];
console.log(arr.__proto__); // Array.prototype
console.log(arr.__proto__.__proto__); // Object.prototype
console.log(arr.__proto__.__proto__.__proto__); // null (end of chain)

// Inheritance through prototype chain
const person = {
  name: "Alice",
  greet: function() {
    return `Hello, I'm ${this.name}`;
  }
};

const student = Object.create(person);
student.name = "Bob";
student.study = function() {
  return "Studying...";
};

console.log(student.greet()); // "Hello, I'm Bob" - inherited!
console.log(student.study()); // "Studying..." - own method

// How JavaScript finds properties
// 1. Check object itself
// 2. Check prototype
// 3. Check prototype's prototype
// 4. Continue up chain until null

Prototypes enable inheritance in JavaScript. Objects inherit from their prototype through the prototype chain. JavaScript looks up properties through this chain.

// Constructor function
function Person(name, age) {
  this.name = name;
  this.age = age;
}

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

Person.prototype.getAge = function() {
  return this.age;
};

// Create instances
const person1 = new Person("Alice", 30);
const person2 = new Person("Bob", 25);

console.log(person1.greet()); // "Hello, I'm Alice"
console.log(person2.greet()); // "Hello, I'm Bob"

// Both share same prototype
console.log(person1.__proto__ === Person.prototype); // true
console.log(person2.__proto__ === Person.prototype); // true

// Inheritance with constructor functions
function Student(name, age, school) {
  Person.call(this, name, age); // Call parent constructor
  this.school = school;
}

// Set up prototype chain
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

Student.prototype.study = function() {
  return "Studying...";
};

const student = new Student("Charlie", 20, "University");
console.log(student.greet()); // Inherited from Person
console.log(student.study()); // Own method

Constructor functions create objects with shared prototypes. Add methods to prototype for efficiency. Use Object.create() for inheritance.

// ES6 Class (syntactic sugar)
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    return `Hello, I'm ${this.name}`;
  }
  
  getAge() {
    return this.age;
  }
}

// Under the hood, this is equivalent to:
// function Person(name, age) {
//   this.name = name;
//   this.age = age;
// }
// Person.prototype.greet = function() { ... };

const person = new Person("Alice", 30);
console.log(person.greet()); // "Hello, I'm Alice"

// Inheritance with classes
class Student extends Person {
  constructor(name, age, school) {
    super(name, age); // Call parent constructor
    this.school = school;
  }
  
  study() {
    return "Studying...";
  }
}

const student = new Student("Bob", 20, "University");
console.log(student.greet()); // Inherited
console.log(student.study()); // Own method

// Static methods
class MathUtils {
  static add(a, b) {
    return a + b;
  }
}

console.log(MathUtils.add(5, 3)); // 8
// Called on class, not instance

ES6 classes are syntactic sugar over prototypes. They make inheritance easier but work the same way. extends sets up the prototype chain automatically.

// Object.create() for inheritance
const person = {
  name: "Unknown",
  greet() {
    return `Hello, I'm ${this.name}`;
  }
};

// Create object with person as prototype
const alice = Object.create(person);
alice.name = "Alice";
console.log(alice.greet()); // "Hello, I'm Alice"

// Factory function with Object.create
function createPerson(name, age) {
  const person = Object.create(personMethods);
  person.name = name;
  person.age = age;
  return person;
}

const personMethods = {
  greet() {
    return `Hello, I'm ${this.name}`;
  },
  getAge() {
    return this.age;
  }
};

const bob = createPerson("Bob", 25);
console.log(bob.greet()); // "Hello, I'm Bob"

// Multiple levels of inheritance
const animal = {
  eat() {
    return "Eating...";
  }
};

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

const myDog = Object.create(dog);
myDog.name = "Buddy";
console.log(myDog.eat()); // Inherited from animal
console.log(myDog.bark()); // Inherited from dog

Object.create() creates objects with specific prototypes. It's a clean way to implement inheritance without constructor functions. Useful for modern JavaScript patterns.