Search for a command to run...
JavaScript Prototype Explained Like a Family Tree!
Learning web development in public. Writing simple, real-world explanations about web development concepts. Helping beginners understand why things work, not just how.
No comments yet. Be the first to comment.
Every day, millions of users upload photos, videos, stories, and reels to Instagram. From a user's perspective, the process appears simple: select media, apply filters, add a caption, and tap "Post."
Building Offline-First Messaging Apps: How Messages Work Without Internet Modern messaging applications have transformed the way people communicate. Whether it's chatting with friends, collaborating w
In this article we'll explore about the Expo Router and React Navigation and answer which one to use in 2026. If you build mobile apps using React Native, one thing becomes obvious very quickly: Navig
Modern mobile apps are no longer just a collection of screens connected together. Apps like Instagram, WhatsApp, Uber, and Netflix operate at massive scale with millions of users, real time systems, o
In this article we'll be exploring react.js and the things of react.js that makes it popular and stand out among other libraries ( no fight over library vs framework ). We'll go through: What problem
Shkaai
68 posts
If you’ve ever found JavaScript’s prototype system confusing, don’t worry—you’re not alone! But what if I told you that understanding it is as simple as looking at a family tree? That’s right! Let’s break it down in a fun and relatable way.
A prototype in JavaScript is like a hidden blueprint that every object has. It’s a special place where shared properties and methods are stored. Instead of giving each object its own copy, JavaScript lets multiple objects share the same functions using prototypes.
Now lets understand it as a family tree :
Imagine JavaScript objects as family members. Just like kids inherit traits from their parents, objects in JavaScript inherit properties and methods from their prototypes. Here’s how it works:
Object.prototypeAt the very top of the family tree is Object.prototype, the ultimate ancestor of all JavaScript objects. Every object in JavaScript inherits from it, making it the "grandparent" of all objects.
console.log({}.toString()); // [object Object]
This toString() method is inherited from Object.prototype!
Constructor functions act like parents in our family tree. When you create an object using a constructor function, it inherits methods from that function’s prototype.
function Person(name) {
this.name = name;
}
Person.prototype.sayHello = function() {
console.log(`Hello, my name is ${this.name}!`);
};
const alice = new Person("Alice");
alice.sayHello(); // Hello, my name is Alice!
Here, Person.prototype is like a parent passing down the sayHello method to its child, alice.
When we create a new instance using new Person("Alice"), Alice inherits everything from Person.prototype. If Alice doesn’t have a property or method, JavaScript will look up the chain until it finds one.
console.log(alice.toString()); // Still works because it comes from Object.prototype
All objects created from the same constructor function share the same prototype—just like siblings share the same parents!
const bob = new Person("Bob");
bob.sayHello(); // Hello, my name is Bob!
Both alice and bob share Person.prototype, just like siblings sharing inherited traits.
If a child (instance) doesn’t have a property, JavaScript looks up the chain. This is known as prototype chaining.
console.log(alice.hasOwnProperty("sayHello")); // false (because it's inherited from prototype)
The method hasOwnProperty comes from Object.prototype, the grandparent!
Object.create()Sometimes, you might want an object to have a specific prototype without using a constructor function. Think of it as adopting a child into a different family!
const superhero = Object.create(alice);
superhero.superPower = "Flying";
console.log(superhero.name); // Alice (inherited)
console.log(superhero.superPower); // Flying (own property)
JavaScript’s prototype system is just like a family tree. Objects inherit properties from their prototypes, which can be traced back up the chain to Object.prototype. Understanding this can make working with JavaScript objects much easier!
So next time you're debugging an object, just ask yourself: Who are its parents? What did it inherit?