What is prototype?
A prototype is a built‑in object that other objects can inherit from. In JavaScript every object has a hidden link to another object called its prototype, and it can use the properties and methods defined on that prototype as if they were its own.
Let's break it down
- Object: a collection of key‑value pairs.
- Prototype link: each object has an internal [[Prototype]] (accessed via proto or Object.getPrototypeOf).
- Prototype chain: if a property isn’t found on the object itself, JavaScript looks at its prototype, then the prototype’s prototype, and so on until it reaches null.
- Constructor functions: when you create an object with
new MyClass()
, the new object’s prototype is set toMyClass.prototype
.
Why does it matter?
Prototypes let you share behavior (methods) across many objects without copying code, saving memory. They also give you a simple way to implement inheritance, so you can build more complex objects from simpler ones.
Where is it used?
- Everyday JavaScript code (e.g., arrays inherit from
Array.prototype
). - Libraries and frameworks (React components, Node.js modules).
- Custom class‑like structures you write with constructor functions or ES6
class
syntax, which under the hood still use prototypes.
Good things about it
- Memory efficient: one method lives on the prototype, not on every instance.
- Dynamic: you can add or change methods on a prototype at runtime and all existing objects see the update.
- Simple inheritance: no need for complex class hierarchies; the prototype chain handles property lookup automatically.
Not-so-good things
- Can be confusing: beginners often mix up own properties vs. inherited ones.
- Accidental shadowing: adding a property with the same name on an instance hides the prototype’s version, which may cause bugs.
- Performance quirks: deep prototype chains can slow down property lookups, and some JavaScript engines optimize best with flatter chains.