JavaScript Classes

JavaScript Class Inheritance

Written by Swapnil RajaPublished 24 Aug 2026

extends creates a class that inherits everything from another class.

The new class gets all the methods of the one it extends.

It can add its own, and replace any it does not want.

Example

javascript

class Animal {
  speak() {
    return "some sound";
  }
}

class Dog extends Animal {}

console.log(new Dog().speak());

Dog has no methods of its own but inherits speak.

Parent and Child

The class being extended is the parent, or superclass.

The class doing the extending is the child, or subclass.

A child inherits methods and static members, but must call super to inherit setup.

Syntax

javascript

class Child extends Parent {
}

A class can extend only one other class.

Adding to the Parent

The child keeps everything and adds more.

Example

javascript

class Animal {
  eat() {
    return "eating";
  }
}

class Dog extends Animal {
  fetch() {
    return "fetching";
  }
}

const dog = new Dog();

console.log(dog.eat() + " and " + dog.fetch());

The output is eating and fetching.

The Parent Cannot See the Child

Inheritance runs one way only.

Example

javascript

class Animal {}

class Dog extends Animal {
  fetch() {
    return "fetching";
  }
}

console.log(typeof new Dog().fetch);
console.log(typeof new Animal().fetch);

The output is function then undefined.

Static Members Are Inherited Too

A child class can use its parent's static methods.

Example

javascript

class Base {
  static describe() {
    return "a base thing";
  }
}

class Special extends Base {}

console.log(Special.describe());

The static method came along with the rest.

Several Levels Deep

A child can itself be extended.

Keep the chain short; deep hierarchies get hard to follow.

Example

javascript

class Animal {
  breathe() {
    return "breathing";
  }
}

class Dog extends Animal {}
class Puppy extends Dog {}

console.log(new Puppy().breathe());

The method was found three levels up.

When Not to Use It

Inheritance says the child is a kind of the parent.

If it only needs some behaviour, holding an instance is usually clearer.

Example

javascript

class Engine {
  start() {
    return "engine started";
  }
}

class Car {
  constructor() {
    this.engine = new Engine();
  }
  start() {
    return this.engine.start();
  }
}

console.log(new Car().start());

A car has an engine; it is not a kind of engine.

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Class Inheritance</title>
</head>
<body>

  <h1>Class Inheritance</h1>

  <p id="out"></p>

  <script>
    class Animal {
      constructor(name) {
        this.name = name;
      }
      describe() {
        return this.name + " is an animal";
      }
    }

    class Dog extends Animal {
      fetch() {
        return this.name + " fetches the ball";
      }
    }

    const rex = new Dog("Rex");

    document.getElementById("out").innerHTML =
      rex.describe() + "<br>" + rex.fetch();
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try another subclass:

Add class Cat extends Animal with its own method.

Important Points

extends makes one class inherit from another.
The child gets the parent's methods and static members.
The parent knows nothing about the child.
A class can extend only one other class.
Prefer holding an instance when it is not a true is a relationship.

Conclusion

Inheritance lets shared behaviour be written once.

The parent-child direction is one way, which keeps it predictable.

The next lesson covers super, which the constructor needs.

PreviousJavaScript Static Members NextJavaScript super Keyword