Platform under construction

Objects, Prototypes & Classes

Advanced

Class Inheritance

Class inheritance lets one class extend another, but composition is often simpler when behavior does not truly form a hierarchy.

class Widget {
  constructor(title) { this.title = title; }
}

class ButtonWidget extends Widget {
  click() { return `${this.title} clicked`; }
}

Objects, Prototypes & Classes

Inheritance shares behavior through an extends relationship.

A subclass extends a parent class. The subclass inherits methods from the parent and can add or override behavior.

When a subclass has its own constructor, it must call super() before using this. super() runs the parent constructor.

Inheritance is useful for real is-a relationships. If the relationship is only about sharing a small helper, composition or plain functions are often cleaner.

extends

Creates a subclass relationship.

super()

Calls the parent constructor.

Override

A subclass can replace a parent method.

Composition

Using smaller objects/functions instead of a class hierarchy.

Examples

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

Small hierarchy with a real relationship

class Widget {
  constructor(title) {
    this.title = title;
  }
}

class Panel extends Widget {
  renderTitle() {
    return this.title;
  }
}

Inheritance just to share one helper

class FormatHelpers {
  format(value) { return value.trim(); }
}

class Profile extends FormatHelpers {}

// A plain format function would be clearer.

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.

Basic inheritance

Subclass inherits parent methods.

class Widget {
  label() { return "Widget"; }
}

class Panel extends Widget {}
console.log(new Panel().label());

super constructor

Initialize parent state first.

class Widget {
  constructor(title) { this.title = title; }
}

class Panel extends Widget {
  constructor(title, size) {
    super(title);
    this.size = size;
  }
}

Override method

Subclass can customize behavior.

class Widget { label() { return "Widget"; } }

class Panel extends Widget {
  label() { return "Panel"; }
}

Call parent method

super can call parent methods too.

class Widget { label() { return "Widget"; } }
class Panel extends Widget {
  label() { return `${super.label()} Panel`; }
}

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.

Use inheritance for real hierarchies

A subclass should truly be a specialized parent.

Call super before this

Subclass constructors must initialize parent state first.

Keep hierarchies shallow

Deep inheritance becomes hard to debug.

Prefer composition for shared helpers

Passing functions or objects is often simpler.

Override deliberately

Changing parent behavior should be obvious.

Test parent and subclass behavior

Inherited behavior can break in subtle ways.

Production thinking

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

Why does this matter?

Inheritance is powerful, but it creates coupling. Use it when it clarifies the model, not just to reuse a few lines of code.

Accessibility

Inherited UI components should not hide accessible behavior in a distant parent class.

Production note

Production class hierarchies should stay shallow and have clear contracts between parent and subclass.

SEO note

Inherited render methods must still produce predictable visible content and metadata.

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 subclass with a different label.
Remove super(title) and read the error.
Rewrite the example with a plain function instead of inheritance.

Practice assignment

Do this before moving to the next topic.

Create one parent class.
Create one subclass with extends.
Override one method and call super.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Class Inheritance.