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.

Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.

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.

💡 Running Code Locally: While this online editor runs real JavaScript, some advanced examples may have limitations. For the best experience:

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)

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:

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.

Does user have its own toString property? No.

This system is known as: Prototype Delegation

Objects "delegate" missing behavior to their prototype.

There are multiple ways to create objects with prototypes:

Every function in JavaScript automatically gets a .prototype property.

Now ALL instances share ONE method stored in one place.

ES6 classes are syntactic sugar over the prototype system.

🎉 You are now operating at a senior-level JavaScript OOP understanding.

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'.