FSM Full Stack Masterclass
Platform under construction
JavaScript course badge

Objects, Prototypes & Classes

Advanced

Prototypes

Prototypes are JavaScript’s delegation system. Objects can read properties and methods from another object through the prototype chain.

const base = {
  describe() { return this.title; }
};

const item = Object.create(base);
item.title = "Overview";

Objects, Prototypes & Classes

The prototype chain lets objects delegate behavior.

Every normal object has a prototype. When JavaScript cannot find a property directly on the object, it looks up the prototype chain.

Constructor functions and classes use prototypes so instances can share methods instead of copying the same function to every object.

Prototype delegation is powerful, but it should be used clearly. Most application code uses object literals, classes or Object.create instead of manually changing prototype chains.

Prototype chain

The lookup path JavaScript follows for missing properties.

Own property

A property stored directly on the object.

Shared method

A method found on the prototype instead of each instance.

Object.create

Creates an object with a chosen prototype.

Examples

Object code becomes clear when shape, state and behavior are visible.

Shared behavior through a clear base object

const baseRecord = {
  label() {
    return this.title;
  }
};

const record = Object.create(baseRecord);
record.title = "Overview";

Changing prototypes after objects exist

const record = { title: "Overview" };

Object.setPrototypeOf(record, baseRecord);

// This is usually slower and harder to reason about.

Code patterns

Reusable examples for quick reference.

These patterns focus on the pieces developers actually reuse: object literals, methods, constructors, prototypes, getters, copying, classes and inheritance.

Object.create

Create an object that delegates to a base object.

const baseRecord = {
  label() { return this.title; }
};

const record = Object.create(baseRecord);
record.title = "Overview";

Own property check

Check whether a property exists directly on the object.

const record = { title: "Overview" };

console.log(Object.hasOwn(record, "title"));

Get prototype

Inspect the prototype of an object.

const record = { title: "Overview" };

console.log(Object.getPrototypeOf(record));

Constructor prototype

Instances delegate to the constructor prototype.

function Record(title) { this.title = title; }
Record.prototype.label = function () { return this.title; };

const record = new Record("Overview");

Rules that matter

Model data deliberately before adding behavior.

Objects are where JavaScript programs start to model real application state. Good object shape makes later functions, classes and UI updates much easier to maintain.

Understand lookup

Missing properties are searched on the prototype chain.

Know own versus inherited

Object.hasOwn checks direct properties.

Share methods through prototypes

This saves memory for many similar objects.

Avoid changing prototypes late

It can hurt performance and readability.

Prefer class for common instance models

Class syntax writes prototype methods cleanly.

Never extend built-in prototypes casually

Changing global behavior can break other code.

Production thinking

Object design decides how understandable the rest of the code can be.

Why does this matter?

Prototypes explain why class methods are shared and why objects can appear to have methods that are not stored directly on them.

Accessibility

Shared UI model methods should still produce predictable labels and states when accessed through prototypes.

Production note

Production code should avoid prototype tricks unless there is a clear architectural reason.

SEO note

Prototype-based content models must produce stable visible text when methods are inherited.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

  • Add another method to baseRecord.
  • Check Object.hasOwn for status.
  • Create a second record with the same prototype.

Practice assignment

Do this before moving to the next topic.

  1. Create a base object with one method.
  2. Create a child object with Object.create.
  3. Explain which properties are own and which are inherited.

Try it yourself

Create inherited behavior with Object.create

Live preview

Self-check

Before you continue, prove that you understand Prototypes.

Advanced

Object-oriented JavaScript becomes much easier when you can explain where the data lives, where the method is found and which object receives this.

  1. Can you explain the prototype chain?
  2. Can you explain own properties?
  3. Can you explain Object.create?
  4. Can you explain why prototype methods are shared?
  5. Can you explain why changing prototypes late is risky?

Senior audit upgrade

Extra production context for Prototypes.

Prototype lookup model

JavaScript looks for a property on the object first, then walks up the prototype chain.

object
  -> object prototype
  -> Object.prototype
  -> null