Introduction to Prototypes

• Imagine if Bollywood was a programming language, every superstar like Amitabh Bachchan or Shah Rukh Khan would have their own prototype. This prototype would carry all their unique traits—like Amitabh’s baritone voice or Shah Rukh’s signature arms-wide-open pose. In JavaScript, every object has a prototype, which acts as a template from which the object inherits properties and methods. 

What is a Prototype?

• In JavaScript, a prototype is like a blueprint or DNA for objects. It’s what makes inheritance possible, allowing objects to share methods and properties. Imagine this as the unseen mentor behind the scenes in a Bollywood movie, like the director guiding the actors, or Karan Johar ensuring that every love story has a tear-jerking moment.

• When you create an object in JavaScript, it automatically links to a prototype. If the object doesn't have a certain property or method, JavaScript looks up the prototype chain to see if it’s available there.

Example:

function Actor(name, role) {
    this.name = name;
    this.role = role;
}
Actor.prototype.introduce = function () {
    console.log(
Main hoon ${this.name}, aur meri role hai ${this.role}.
);
};

let srk = new Actor("Shah Rukh Khan", "Raj/Rahul");
srk.introduce(); // Output: Main hoon Shah Rukh Khan, aur meri role hai Raj/Rahul.

Explanation: Here, Actor is a constructor function. The introduce method is added to Actor.prototype, which means any object created with the Actor constructor (like srk) can access this method.

Inheritance in JavaScript

• Inheritance is like Ranbir Kapoor inheriting the charm of his father Rishi Kapoor and the talent of his grandfather Raj Kapoor. In JavaScript, inheritance allows one object to access properties and methods of another object, making your code reusable and organized.

Example:

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

Superstar.prototype.dance = function () {
    console.log(
<span class="hljs-subst">${<span class="hljs-variable language_">this</span>.name}</span> can dance like Hrithik!
);
};

function BollywoodStar(name, movie) {
    Superstar.call(this, name);
    this.movie = movie;
}
BollywoodStar.prototype = Object.create(Superstar.prototype);
BollywoodStar.prototype.constructor = BollywoodStar;
BollywoodStar.prototype.act = function () {
    console.log(
<span class="hljs-subst">${<span class="hljs-variable language_">this</span>.name}</span> acted in <span class="hljs-subst">${<span class="hljs-variable language_">this</span>.movie}</span>.
);
};

let hrithik = new BollywoodStar("Hrithik Roshan", "Krrish");
hrithik.dance(); // Output: Hrithik Roshan can dance like Hrithik!
hrithik.act();   // Output: Hrithik Roshan acted in Krrish.

Explanation: Here, Superstar is the parent class, and BollywoodStar is the child class. By using Superstar.call(this, name) inside BollywoodStar, we inherit properties from Superstar. The BollywoodStar.prototype = Object.create(Superstar.prototype); line allows BollywoodStar to inherit methods from Superstar.

Understanding proto and prototype

• In JavaScript, every object has a proto property, which is a reference to its prototype. For instance, if you check hrithik.proto, you’ll see it points to BollywoodStar.prototype, and further up the chain, it points to Superstar.prototype.

Example:

console.log(hrithik.proto);
console.log(hrithik.proto.proto);

Explanation: The first proto refers to BollywoodStar.prototype, and the second one goes up to Superstar.prototype, showing the inheritance chain. It’s like tracing Ranbir Kapoor’s lineage back to Raj Kapoor.

Why Use Inheritance?

• Inheritance makes your code DRY (Don't Repeat Yourself). Imagine if every time a Bollywood actor danced, they had to reinvent the step from scratch—it would be chaos! Instead, they inherit steps from previous choreography, adding their unique twist. Similarly, inheritance allows you to build on existing code, making it more efficient and maintainable.

Conclusion:

• Understanding prototypes and inheritance in JavaScript is like knowing the secret sauce behind Bollywood’s blockbuster formula. It might seem complex at first, but once you get the hang of it, you’ll see how powerful and flexible JavaScript can be. Whether you’re a fresh face in the coding world or a seasoned director of web applications, mastering these concepts will help you write cleaner, more efficient code. So, go ahead—give your JavaScript objects the star treatment they deserve!