Prototypes Classes
Prototypes are the objects JavaScript uses to share properties and methods between instances, and classes are cleaner class syntax built on top of that prototype system for creating and inheriting objects.
Part of the free JavaScript course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.
Master JavaScript's object model, prototypal inheritance, and modern ES6 classes.
What You'll Learn in This Lesson
💡 Running Code Locally: While this online editor runs real JavaScript, some advanced examples may have limitations. For the best experience:
- Download Node.js to run JavaScript on your computer
- Use your browser's Developer Console (Press F12) to test code snippets
- Create a .html file with <script> tags and open it in your browser
Imagine a family tree . When you don't know how to do something (like cook a recipe), you ask your parent. If they don't know, they ask their parent, and so on up the family tree. In JavaScript, objects work the same way: when an object doesn't have a property or method, it "asks" its prototype, which asks its prototype, until it finds the answer or reaches the end of the chain.
Class = Blueprint (like a recipe) | Prototype = Family elder (where you inherit skills from)
Concept
Prototype-based
Class-based (ES6)
Object Creation
Object.create(proto)
new ClassName()
Inheritance
Prototype chain lookup
extends keyword
Method Sharing
Func.prototype.method
Defined inside class body
Under the Hood
The actual mechanism
Syntactic sugar over prototypes
Introduction
JavaScript is one of the most misunderstood languages in the world when it comes to object-oriented programming. Developers coming from Java, Python, C#, C++, or even PHP often assume JavaScript follows the same classical inheritance model.
JavaScript uses a prototype-based inheritance system, which is extremely flexible, dynamic, and powerful. ES6 Classes add a familiar syntax, but they are syntactic sugar—the underlying system is still prototypes all the way down.
This expert lesson will give you a true, deep, structural understanding of:
- How prototypes work
- How objects inherit properties
- What the [[Prototype]] internal slot is
- How the prototype chain is built
- Why functions have .prototype
- How ES6 Classes map onto prototypes
- How memory is shared between objects
- Real-world design patterns and architectures
1. Understanding JavaScript's Object Model
Everything in JavaScript is built on objects.
Even primitive values like strings, numbers, and booleans are temporarily wrapped in objects when you use methods on them.
Objects do not inherit from classes — they inherit from OTHER OBJECTS.
Every object in JavaScript has an internal hidden pointer: [[Prototype]]
This pointer links the object to another object. That other object acts as a fallback when the original object does not have a property.
2. The Prototype Chain — How JavaScript Looks Up Properties
Does user have its own toString property? No.
- Does user have toString? ❌ No
- Does user.[[Prototype]] (Object.prototype) have toString? ✅ YES
- Use that one.
This system is known as: Prototype Delegation
Objects "delegate" missing behavior to their prototype.
3. Creating Objects and Their Prototypes
There are multiple ways to create objects with prototypes:
Method 1 — Object Literals
Method 2 — Object.create()
Method 3 — Constructor Functions
Method 4 — ES6 Classes (Syntactic Sugar)
4. Functions and .prototype — Why Functions Create Objects
Every function in JavaScript automatically gets a .prototype property.
- Create an empty object
- Set its [[Prototype]] = User.prototype
- Bind this inside User() to the new object
- Return the object
5. Building Methods on the Prototype
Now ALL instances share ONE method stored in one place.
6. ES6 Classes — Friendlier Syntax Over Prototypes
ES6 classes are syntactic sugar over the prototype system.
- Person is still a function
- Methods like greet live on Person.prototype
- new Person() sets up the prototype chain as before
Class Inheritance
Static Methods
Getters & Setters
Private Fields
Summary: What You Learned
🎉 You are now operating at a senior-level JavaScript OOP understanding.
📋 Quick Reference — OOP in JS
Feature
Syntax
Class
class User { ... }
Constructor
constructor(name) { this.name = name }
class Dog extends Animal
Static
static create() { ... }
Private
#secret = "hidden"
Lesson 12 Complete — Prototypes & Classes!
You now understand the architecture of JavaScript objects. This is critical for understanding frameworks like React and Vue under the hood.
Up next: Design Patterns — proven architectural solutions for common coding problems! 🏗️
Practice quiz
In JavaScript, what do objects inherit from?
- Classes
- Interfaces
- Other objects (their prototype)
- The global scope
Answer: Other objects (their prototype). JavaScript uses prototype-based inheritance: objects inherit from other objects, not from classes.
What is the internal hidden pointer every object uses to link to its prototype?
Every object has an internal [[Prototype]] slot pointing to another object used as a fallback.
When you read user.toString() and user has no own toString, where is it found?
- It throws
- It returns undefined
- On the window object
- On Object.prototype via the prototype chain
Answer: On Object.prototype via the prototype chain. JavaScript delegates up the prototype chain and finds toString on Object.prototype.
What are ES6 classes, under the hood?
- A brand-new inheritance model
- Syntactic sugar over the prototype system
- Faster than prototypes
- Only usable in TypeScript
Answer: Syntactic sugar over the prototype system. ES6 classes are syntactic sugar; the underlying mechanism is still prototypes.
Why is putting a method on User.prototype better than defining it inside the constructor?
- All instances share one method instead of each getting its own copy
- It runs faster to define
- It makes the method private
- It avoids the prototype chain
Answer: All instances share one method instead of each getting its own copy. Methods on the prototype are shared across all instances, saving memory versus a per-instance copy.
What does Object.create(user) produce?
- A copy of user's properties
- A frozen version of user
- A new object whose prototype is user
- An array of user's keys
Answer: A new object whose prototype is user. Object.create(user) makes a new object linked so that user is its prototype.
How do you call a parent constructor from a subclass constructor?
- this.parent()
- super(...)
- extends(...)
- Object.parent()
Answer: super(...). Inside a subclass constructor, super(...) invokes the parent class constructor.
How is a static method like MathHelper.add(5, 3) called?
- On an instance: new MathHelper().add()
- Only inside the constructor
- Through the prototype chain
- On the class itself, not on an instance
Answer: On the class itself, not on an instance. Static methods belong to the class itself and are called as MathHelper.add(5, 3), not on instances.
What syntax declares a truly private class field?
- _name
- #name
- private name
- this.name
Answer: #name. Prefixing a field with # (e.g. #balance) makes it genuinely private to the class.
What does typeof Person evaluate to for a class Person { }?
- 'class'
- 'object'
- 'function'
- 'undefined'
Answer: 'function'. A class is still a function under the hood, so typeof returns 'function'.
Continue this course
- Previous: Closures
- Next: Design Patterns