Prototype Design Pattern Explained

The Prototype pattern creates new objects by copying an existing one (the prototype) instead of building from scratch. It is useful when creation is expensive or configuration is complex.

The concept

A prototype offers clone(). You copy a configured object and tweak the copy.

Be careful with shallow vs deep copies: nested objects must be duplicated too, or copies share state. JavaScript's whole object model is prototype-based.

Copy, then tweak

Practical examples

structuredClone (deep copy)

const base = { theme: 'dark', widgets: [1, 2] }
const mine = structuredClone(base)
mine.widgets.push(3)   // base unchanged

Object.create

const proto = { greet() { return 'hi ' + this.name } }
const a = Object.create(proto); a.name = 'Ada'

Shallow trap

const copy = { ...base }
copy.widgets.push(9)   // base.widgets also changed!

Common mistakes

• Shallow copies sharing nested objects.
• Cloning objects holding resources (sockets, handles).
• Circular references breaking naive deep copies.

Key takeaways

• Create by cloning.
• Deep vs shallow matters.
• JS prototypes are built on it.

FAQ

Prototype vs Factory?

Prototype copies an instance; Factory constructs new ones.

Fast deep copy?

structuredClone in modern JavaScript.