"JavaScript Prototypes & Inheritance"

---

JavaScript doesn’t use traditional class-based inheritance like Java or C++. Instead, it follows a unique system called prototypal inheritance, which allows objects to inherit properties and methods from other objects.

Sounds confusing? Don’t worry! By the end of this article, you’ll fully understand:

✔️ What prototypes are and how they work
✔️ How prototype inheritance allows objects to share properties
✔️ The difference between prototype and __proto__
✔️ What happens when two objects are created from a class using new
✔️ How to achieve inheritance without using extends
✔️ A unique, analogy-based explanation of JavaScript Events (without real-world examples!)

All you have to do is give 4 minutes for each topic, and you'll master JavaScript prototypes and inheritance! 🚀

---

1. Understanding Prototypes – A Blueprint Analogy

1.1 What Are Prototypes?

Think of prototypes like blueprints. Imagine you run a toy robot factory. Instead of designing each robot from scratch, you create a master blueprint that defines:

✅ The robot's shape
✅ Its functions (e.g., walk, talk)
✅ Common features all robots should have

Now, every robot that comes out of the factory follows this blueprint. But here’s the interesting part:

• Each robot can have its own unique features (like different colors or accessories).

• If a robot doesn’t have a feature, it looks at the blueprint to find it!

This is exactly how prototypes work in JavaScript.

---

1.2 How Prototypes Work in JavaScript

Every JavaScript object has a hidden link to a prototype object. If the object doesn’t have a certain property or method, JavaScript looks up its prototype chain to find it.

Example: Prototypes in Action

// Constructor function
function Robot(name) {
    this.name = name;
}

// Adding a method to the prototype
Robot.prototype.speak = function() {
    console.log(this.name + " says Beep Boop!");
};

// Creating two robot objects
let r1 = new Robot("RoboOne");
let r2 = new Robot("RoboTwo");

// Using the prototype method
r1.speak(); // Output: RoboOne says Beep Boop!
r2.speak(); // Output: RoboTwo says Beep Boop!

🔹 Even though speak() was not directly written inside r1 and r2, they can still use it because they inherit it from the prototype.

---

2. Prototype vs. __proto__ – The DNA of Objects

2.1 Prototype vs. __proto__ Analogy – The Genetic Trait

Think of a family tree:

• Prototype is like the DNA blueprint that defines traits (methods/properties).

• __proto__ is like the actual inherited DNA that connects a child to their parent.

Each object has a __proto__ property that points to its prototype.

2.2 How prototype and __proto__ Work

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

Animal.prototype.makeSound = function() {
    console.log(this.type + " makes a sound.");
};

let dog = new Animal("Dog");

console.log(dog.__proto__ === Animal.prototype); // true
console.log(Animal.prototype.__proto__ === Object.prototype); // true

🔹 __proto__ links the object (dog) to the prototype (Animal.prototype).

---

3. What Does new Do?

When we create an object using new ClassName(), JavaScript does three things:

1️⃣ Creates an empty object {}.
2️⃣ Sets the new object’s __proto__ to ClassName.prototype.
3️⃣ Runs the function with this pointing to the new object.

So, when two objects are created from one class, they share the prototype but have their own individual properties.

---

4. Achieving Inheritance Without extends

In JavaScript, we can manually set one object’s prototype to another, allowing inheritance without extends.

4.1 Example: Manual Inheritance

function Vehicle(type) {
    this.type = type;
}

// Parent prototype
Vehicle.prototype.start = function() {
    console.log(this.type + " is starting.");
};

// Child constructor
function Car(name) {
    this.name = name;
}

// Inheriting Vehicle’s prototype
Car.prototype = Object.create(Vehicle.prototype);

let myCar = new Car("Tesla");

console.log(myCar instanceof Car); // true
console.log(myCar instanceof Vehicle); // true

🔹 Here, Car inherits from Vehicle without using extends.

---

5. JavaScript Events – A Fun Analogy (Without Real-World Examples!)

Instead of using real-world examples, let’s create a fun game-based analogy for JavaScript events.

5.1 Events Are Like Traps in a Game

Imagine you are playing a video game, and there are different traps scattered throughout the level.

• Clicking a button is like stepping on a trap.

• The game detects the trap (event listener) and triggers an action (like making the player jump).

JavaScript works the same way with events.

• We set traps (event listeners).

• When something happens, JavaScript reacts.

5.2 Example: Click Event

document.getElementById("myButton").addEventListener("click", function() {
    console.log("Button clicked!");
});

🔹 The event listener waits for the player (user) to step on the trap (click the button).

---

Conclusion

Now you have a deep understanding of prototypes, inheritance, and events in JavaScript! 🎉

✔️ Prototypes are like blueprints that objects follow.
✔️ Prototype vs. __proto__ is like genetic inheritance in a family.
✔️ new creates an object and links it to a prototype.
✔️ Inheritance can be achieved manually using Object.create().
✔️ Events act like traps in a game, waiting for user actions.

With this knowledge, you can now confidently work with object-oriented JavaScript like a pro! 🚀

---