If you’ve been learning JavaScript, chances are you’ve seen these mysterious words:
__proto__ or [[prototype]]
&
prototype
If you’ve been learning JavaScript, chances are you’ve seen these mysterious words:
js
proto
prototype
They look weird. They sound weird.
And every tutorial makes them feel like rocket science.
But here’s the truth:
They’re NOT complicated. You’ve just been told in the wrong way.
So, let’s break it down in a way that will stick in your head forever — no heavy jargon, no boring theory.
Imagine You Own a Toy Factory
Yes, you! You own a toy factory.
Your factory has blueprints for toys — this blueprint says:
“Every toy will have these features.”
Now, when you create a new toy in your factory, each toy will be made based on that blueprint.
In JavaScript world:
The blueprint = prototype
The toys you make = objects created with the new keyword
Each toy has a hidden link to its blueprint = proto
What is prototype?
In JavaScript, every function automatically gets a property called prototype.
Think of it like this:
prototype is your factory blueprint that stores methods and properties you want every new object to have.
Example:
js
function Car() {
this.color = "red";
}
Car.prototype.drive = function() {
console.log("Car is driving");
};
Here:
Car is your factory.
Car.prototype is your blueprint with a drive function.
What is proto?
When you create a new object using new Car(), JavaScript secretly gives that object a hidden property called proto.
This proto is just a link that points to the function’s prototype.
Example:
js
let myCar = new Car();
console.log(myCar.proto === Car.prototype); // true
That’s it. That’s the magic.
No voodoo. No mystery.
How the new Keyword Ties It All Together
When you run:
js
let car1 = new Car();
JavaScript does 4 things:
- Creates a new empty object {}.
- Sets that object’s proto to Car.prototype.
- Calls the Car function, setting this to the new object.
- Returns the new object.
Result?
You now have an object that can use all the methods in the blueprint.
Why Should You Care?
Because understanding proto and prototype is like unlocking the secret door to how JavaScript actually works.
Once you get this, things like OOP, inheritance, and classes suddenly become EASY.
Instead of memorizing, you’ll actually understand.
Quick Recap (Your “Cheat Sheet”)
prototype → The blueprint that belongs to a function.
proto → The hidden link in an object that points to the function’s prototype.
new keyword → Creates a new object and links it to the prototype.
Want me to write a follow-up that explains JavaScript OOP in the same simple way?
Because if you master this, the rest of OOP is going to feel like a walk in the park.
If you liked this, save it.
Because the next time someone says "proto is confusing",
you’ll just smile and say:
“Oh, you mean the toy factory blueprint trick?” 😉
If this helped you, follow me here on Medium so you never miss my next JavaScript breakdown.” for my upcoming JavaScript OOP series where I make even the hardest concepts easy.
Top comments (0)