Ever borrowed a book from a library? Good. You already understand JavaScript Prototypes.
Imagine you walk into your neighborhood library looking for a rare book on "The Secrets of JavaScript Sorcery." You ask the librarian, but—oops!—your library doesn’t have it.
But don’t worry! Instead of sending you home empty-handed, the librarian calls up the central city library to check if they have it. If they do, you get your book. If not, the search continues up the chain… maybe to the National Library Archive. And if even they don’t have it? Sorry, no book for you.
This is exactly how JavaScript’s prototype chain works! 🚀
📌 TL;DR
- Objects in JavaScript can inherit properties from other objects.
- When a property isn't found in an object, JavaScript climbs up the prototype chain to check its prototype.
-
Object.create()is like opening a new library branch connected to the central library. - If a property isn't found anywhere, JavaScript returns
undefined.
🏛 Libraries = JavaScript Objects
In JavaScript, objects can borrow properties and methods from other objects, just like a library can request books from a bigger library system. Let’s break it down:
1️⃣ Local Library (Your Object)
Your library has its own collection—books it directly owns.
const localLibrary = {
specialCollection: ["Ancient Maps", "Rare Manuscripts"]
};
console.log(localLibrary.specialCollection);
// ["Ancient Maps", "Rare Manuscripts"]
2️⃣ Central Library (Prototype)
But what if your local library doesn't have a specific book? It asks the Central Library, which has a much bigger collection.
const centralLibrary = {
lendBook: function() {
console.log("Here's your book from the central archive!");
}
};
3️⃣ Connecting Them (Prototype Chain)
Now, let's link your local library to the central one using Object.create(). This way, whenever your local library doesn't have something, it automatically looks in the central library!
const cityLibrary = Object.create(centralLibrary);
cityLibrary.specialCollection = ["Ancient Maps", "Rare Manuscripts"];
console.log(cityLibrary.specialCollection);
// ["Ancient Maps", "Rare Manuscripts"]
cityLibrary.lendBook();
// "Here's your book from the central archive!"
Even though lendBook wasn't defined in cityLibrary, it still worked! That's because JavaScript climbed up the prototype chain and found it in the centralLibrary.
🛤 The Search Path (Prototype Chain in Action)
Let's add another library: a small-town library that borrows from the city library.
const smallTownLibrary = Object.create(cityLibrary);
console.log(smallTownLibrary.specialCollection);
// ["Ancient Maps", "Rare Manuscripts"]
Boom! Even though smallTownLibrary doesn't have a specialCollection directly, it inherits it from cityLibrary, which inherited it from itself.
And it can still borrow books from the central library:
smallTownLibrary.lendBook();
// "Here's your book from the central archive!"
🔗 JavaScript keeps searching up the chain until it finds what it needs---or gives up!
❌ What Happens If a Book Doesn't Exist?
Let's say you ask for a mystery book that no one owns:
console.log(smallTownLibrary.rareBook);
// undefined
JavaScript checks:
1️⃣ smallTownLibrary → ❌ (Doesn't have it)\
2️⃣ cityLibrary → ❌ (Doesn't have it either)\
3️⃣ centralLibrary → ❌ (Nope!)\
4️⃣ Object.prototype → ❌ (Last stop---if it's not here, it doesn't exist)
Since no one has it, you get undefined.
📌 This is exactly how JavaScript searches for properties in objects.
🖼 Visualizing the Prototype Chain
💡 Want an easier way to visualize the Prototype Chain?\
Here's what our example looks like behind the scenes:
smallTownLibrary ---> cityLibrary ---> centralLibrary ---> Object.prototype ---> null
Every object in JavaScript follows this chain all the way up to Object.prototype, which is like the National Library Archive---the place where common methods like .toString() exist.
🎯 Final Thoughts
Next time you're borrowing a book from a library, think about JavaScript's prototype chain working in the same way. Your local branch (object) might not have a book (property), but it always knows where to look!
This is what makes JavaScript so powerful and flexible---objects can share behavior without copying everything manually.
Now that you've cracked the mystery of Prototypes, where should we go next? 🤔
💡 Thinking about writing an article on how new works in JavaScript? Let me know!
💬 What do you think?
Have you encountered prototype chains in your projects? Let me know your thoughts and experiences in the comments below! 🚀
Top comments (3)
Great analogy! The library system makes the prototype chain really easy to understand. I liked the breakdown of how JavaScript looks for properties. Looking forward to your next post on
new!Thank you! While reading about prototype chain, I always stumble upon the same real-world example of comparing it with people and parents and genes. But in my opinion, if you know a bit about genes, the analogy is not that straightforward. It's kind of oversimplified and also too common. So I decided to bring in a simpler comparison of a single line connection chain. Guess it works!
PS. already drafting my next article about the
newoperator ;)It's like nobody even remembers prototypes anymore!
I'm used to the vehicle/car/truck/motorcycle analogy.
But the thing to note is memory management of where to put a shared function or attribute. On the .proto or on the 'this'...