"Prototypes"

---

JavaScript is a prototype-based language, which means that objects can inherit properties and methods from other objects. This is different from classical inheritance in languages like Java or C++, where classes define the blueprint for objects.

If you've ever wondered how JavaScript objects inherit properties or why some objects have access to built-in functions like toString() or hasOwnProperty(), the answer lies in prototypes and the prototype chain.

To make this concept easier to grasp, let's use a real-world analogy—think of prototypes like blueprints for houses. Every house in a neighborhood may have a standard design, but individual owners can modify and personalize their homes. Similarly, in JavaScript, objects inherit properties and methods from a common prototype but can also have their own unique features.

In this article, we’ll break it down step by step so that even a 5-year-old can understand it! 🚀

---

🔹 1. Understanding Prototypes in JavaScript

What is a Prototype?

In JavaScript, every object has an internal hidden property called [[Prototype]]. This prototype is like a blueprint that allows the object to inherit properties and methods from another object.

🔹 Analogy:
Imagine you live in a society where all houses follow a common blueprint. This blueprint defines the basic structure of every house—doors, windows, and walls. However, you can modify your house by adding custom furniture, decorations, or extensions.

Similarly, every JavaScript object follows a prototype, which contains predefined functionalities (like toString(), valueOf(), etc.), but you can also add custom methods and properties to your objects.

---

Creating an Object and Checking its Prototype

Let’s create a simple object and inspect its prototype:

let person = {
  name: "Alice",
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

console.log(person.__proto__); // Shows the prototype of the object

Even though we didn’t explicitly define certain properties, the person object still has access to built-in methods. That’s because JavaScript assigns a default prototype to every object.

🔹 Checking an object's prototype:

console.log(Object.getPrototypeOf(person)); // Another way to access the prototype

---

🔹 2. The Prototype Chain – How Inheritance Works

When you try to access a property on an object, JavaScript first looks for that property inside the object itself. If it doesn’t find it, it looks at the object's prototype, then the prototype’s prototype, and so on—until it reaches the topmost prototype, which is Object.prototype.

This lookup process is called the prototype chain.

Example: Understanding the Prototype Chain

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

Animal.prototype.eat = function() {
  console.log(this.name + " is eating.");
};

let dog = new Animal("Buddy");

dog.eat(); // Buddy is eating.
console.log(dog.hasOwnProperty("eat")); // false (eat is inherited from prototype)

🔹 How does JavaScript resolve dog.eat()?
1️⃣ JavaScript first checks if dog has the eat method.
2️⃣ Since dog doesn’t have it, it looks at Animal.prototype.
3️⃣ It finds the method there and executes it!

This chain of looking up properties continues until JavaScript reaches the topmost prototype, which is Object.prototype.

🔹 Illustration of the Prototype Chain:

dog ---> Animal.prototype ---> Object.prototype ---> null

---

🔹 3. Modifying Prototypes – Do's and Don'ts

✅ Do: Add Methods to Prototypes

You can extend an existing prototype to give all objects of that type access to new methods.

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

Person.prototype.sayHello = function() {
  console.log("Hi, I'm " + this.name);
};

let user1 = new Person("Charlie");
user1.sayHello(); // Hi, I'm Charlie

❌ Don't: Modify Built-in Prototypes

Modifying built-in objects like Array.prototype or Object.prototype can cause unexpected behavior and conflicts with other libraries.

🚨 Bad Practice:

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

let numbers = [1, 2, 3];
console.log(numbers.last()); // Works, but modifying built-in prototypes is risky

🔹 Why is this bad?

• If a future JavaScript update includes a built-in last() method, it may conflict with your custom method.

• Other libraries that rely on Array.prototype might break.

Instead, use helper functions:

function getLastElement(arr) {
  return arr[arr.length - 1];
}
console.log(getLastElement([1, 2, 3])); // 3

---

🔹 4. Comparing Object.create(), __proto__, and .prototype

---

Using Object.create()

let animal = {
  sleep: function() {
    console.log("Sleeping...");
  }
};

let cat = Object.create(animal); // cat inherits from animal
cat.sleep(); // Sleeping...

---

Using __proto__ (Deprecated but Exists)

let dog = {
  bark: function() {
    console.log("Woof!");
  }
};

let husky = {};
husky.__proto__ = dog; // Setting prototype manually
husky.bark(); // Woof!

🚨 Why avoid __proto__?

• It’s slow and can cause performance issues.

• Object.create() is a better alternative.

---

Using .prototype with Constructor Functions

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

Car.prototype.drive = function() {
  console.log(this.model + " is driving.");
};

let car1 = new Car("Tesla");
car1.drive(); // Tesla is driving.

• Why use .prototype?
  If you define drive() inside the constructor, every instance will get a separate copy of it, wasting memory. Instead, defining it on Car.prototype makes all instances share the same function.

---

🔹 Conclusion

✔️ Prototypes allow JavaScript objects to inherit properties and methods.
✔️ The prototype chain is how JavaScript looks up properties in objects.
✔️ Modifying prototypes can be useful, but modifying built-in prototypes should be avoided.
✔️ Use Object.create() for inheritance instead of __proto__.
✔️ Use .prototype for constructor functions to optimize memory usage.

By mastering prototypes, you’ll unlock one of the most powerful features of JavaScript! Now, go experiment and see how you can use prototypes in your own projects. 🚀

---