Inheritance with extends & super

A child class starts from a parent class

In the Class basics lesson, you wrote classes with a constructor, methods, getters, setters, and fields. This lesson adds one new idea: a class can extend another class.

Say a User class already stores a name and describes a normal account. You want an admin account. An admin is a user with a few extra powers. You don't want to write the user code again.

So you write class Admin extends User. Some words for this:

• User is the parent class.
• Admin is the child class.
• The child can use everything the parent has. This is called inheritance.
• The child only needs code for the parts that are new or different.

In the F.prototype & constructors lesson, you did this by hand. You linked prototypes with Object.create, and you ran the parent's setup with User.call(this, name). Now two keywords do that work for you:

• extends links the child class to the parent class.
• super lets the child call the parent's constructor or the parent's methods.

The Prototype chain lesson showed how JavaScript finds a property. If an object doesn't have it, JavaScript follows the object's prototype link to another object and looks there. It keeps going until it finds the property or runs out of links.

Class inheritance uses this same search. extends does not copy the parent's methods into the child. It adds links, so the search can reach the parent.

A class is a value too: it is the constructor function itself. So extends makes two links:

• Admin.prototype links to User.prototype. Instances use this link to find methods.
• Admin links to User. The class itself uses this link to find static fields and methods, the ones that belong to the class, not to each object.

1class User {2  static category = "person";3  greet() { return "hi"; }4}5class Admin extends User {}6console.log(Object.getPrototypeOf(Admin.prototype) === User.prototype);Run7console.log(Object.getPrototypeOf(Admin) === User);8console.log(new Admin().greet());9console.log(Admin.category);

The table below compares the old way, by hand, with the class way. Read each row as: "to do this job, the old way writes this, and a class writes this."

instanceof asks one question: "Is this class's prototype somewhere in the object's chain of links?" An Admin object links to Admin.prototype, which links to User.prototype. So an admin is also a user.

class User {}
class Admin extends User {}
const admin = new Admin();
console.log(admin instanceof Admin);
console.log(admin instanceof User);
console.log(admin instanceof Object);

Line by line:

• Line 4 prints true, because admin was made by Admin.
• Line 5 prints true, because User.prototype is the next link after Admin.prototype.
• Line 6 prints true, because every chain like this ends at Object.prototype.

class User {
  static kind = "person";
}
class Admin extends User {}
console.log(Admin.kind);
console.log(new Admin().kind);

Line 2 puts a static field, kind, on the User class. Line 5 prints person. Admin has no kind, so JavaScript follows the link from Admin to User and finds it there.

Line 6 prints undefined. An admin object never sees kind, because static fields are on the class, not on its objects. The next lesson covers static members in full.

So the child never holds copies of the parent's methods. When a method isn't on the child's prototype, JavaScript follows the link and looks on the parent's prototype.

A class that extends another class is called a derived class. "Derived" means "made from another one". A derived class has one strict rule for its constructor:

• The parent's constructor builds the new object.
• The child calls it by writing super(...).
• Until super(...) has run, the object doesn't exist yet, so the child can't use this.

Step through new Admin("Ada") below. Watch the order. It has five steps:

1. The child's constructor starts.
2. It calls super(), and the parent's fields get their values.
3. The parent's constructor body runs.
4. Back in the child, the child's fields get their values.
5. The rest of the child's constructor runs.

1const log = [];2class User {3  role = log.push("base field: role");4  constructor(name) {5    log.push("base constructor: " + name);6    this.name = name;7  }8}9class Admin extends User {10  level = log.push("derived field: level");11  constructor(name) {12    log.push("derived constructor: before super");Run13    super(name);14    log.push("derived constructor: after super");15  }16}17new Admin("Ada");18console.log(log.join(" → "));

const log = [];
class User {
  role = log.push("base field");
  constructor() { log.push("base constructor"); }
}
class Admin extends User {
  level = log.push("child field");
  constructor() {
    super();
    log.push("child after super");
  }
}
new Admin();
console.log(log.join(" | "));

Each step adds a note to the log array. Line 14 prints the notes in order: base field | base constructor | child field | child after super.

The child's constructor starts first, at line 8. On line 9, super() runs the parent's field (line 3) and the parent's constructor body (line 4). When it returns, the child's field (line 7) runs. Last, line 10 runs.

A child class can have a method with the same name as a parent method. This is called overriding. JavaScript looks on the child's prototype first, so it finds the child's method and stops. The parent's version is not used.

Sometimes you don't want to throw the parent's version away. You want to keep it and add one small thing. For that, write super.method() inside the child's method. It runs the parent's version and gives you its result. Then you add your part.

1class User {2  constructor(name) { this.name = name; }3  describe() { return this.name + " is a user"; }4  settings() { return ["profile", "notifications"]; }5}6class Admin extends User {7  describe() { return this.name + " is an admin"; }8  settings() { return [...super.settings(), "danger zone"]; }9}10const ada = new Admin("Ada");Run11console.log(ada.describe());12console.log(ada.settings().join(", "));

In the replay above, describe() replaces the parent's method and never calls it. settings() calls super.settings() to get the parent's list, then adds one more item. Both are fine. Pick the one that matches what the child needs.

class User {
  greet() { return "Hello " + this.name; }
}
class Admin extends User {
  greet() { return super.greet() + "!"; }
}
const admin = new Admin();
admin.name = "Ada";
console.log(admin.greet());

This prints Hello Ada!. On line 5, super.greet() runs the parent's greet(). Inside it, on line 2, this is still the same admin object. So this.name is "Ada", which line 8 set.

How does super know where the parent is? Each method you write with method syntax, like greet() { ... }, gets a hidden note about the object it was written in. The JavaScript specification calls this note [[HomeObject]]. The double square brackets mean it is hidden: your code can't read it.

When the method runs super.greet(), JavaScript goes to the method's home object, follows its prototype link up one step, and looks for greet there.

In the code below, other borrows the greet method from parent. When it runs:

• this is other, so this.name is "Copied method".
• But super still goes from parent to grand, the method's first home.
• It never looks at otherBase, even though other links to it.

1const grand = {2  label: "grand",3  greet() { return this.name + " via grand"; }4};5const parent = {6  __proto__: grand,7  label: "parent",8  greet() { return super.greet() + " → parent"; }Run9};10const otherBase = {11  label: "other base",12  greet() { return this.name + " via other base"; }13};14const other = { __proto__: otherBase, name: "Copied method" };15other.greet = parent.greet;16console.log(other.greet());

The result is Copied method via grand → parent. So super only works in methods that have a home. And if you copy a method that uses super to a new object, it won't switch to the new object's parent.

Rules and edge cases

Most inheritance code follows a few rules. Read each row as: "in this place, follow this rule, like in this example." Come back to it until the rules feel natural.

Here is the most common mistake, and its fix. In the first program, line 6 uses this before line 7 calls super(name), so it throws an error.

1class User {2  constructor(name) { this.name = name; }3}4class Admin extends User {5  constructor(name) {6    this.name = name;7    super(name);8  }9}10new Admin("Ada");

1class User {2  constructor(name) { this.name = name; }3}4class Admin extends User {5  constructor(name) {6    super(name);7    this.role = "admin";8  }9}10console.log(new Admin("Ada").role);

In the fixed program, line 6 calls super(name) first. Then line 7 can safely set this.role, and the program prints admin.

Where you'll use this

In front-end code today, inheritance is not the first tool for sharing code. The Delegation vs classical inheritance lesson warned about long family trees of classes. Use extends when the child really is a special kind of the parent, and every parent method still makes sense for it.

• A button class in a component library can extend a small base class that holds the setup code every component shares.
• In tests, a fake service class can extend a real one, replace one method, and keep the rest.
• Some frameworks and browser features ask you to extend a class they give you. A later lesson, after private fields, covers extending built-in classes.

You can also extend classes that come with JavaScript. They are called built-in classes:

• A custom error class that extends Error keeps the normal error parts, like message.
• A list class that extends Array keeps numbered items and length.

class CheckoutError extends Error {}
class ScoreList extends Array {}
const error = new CheckoutError("Payment declined");
const scores = new ScoreList(10, 8);
console.log(error.name + ": " + error.message);
console.log(scores.length + ", " + scores[1]);
console.log(error instanceof Error);
console.log(scores instanceof Array);

Line by line:

• Line 5 prints Error: Payment declined. The error keeps its name and message.
• Line 6 prints 2, 8. The list has 2 items, and the item at index 1 is 8.
• Lines 7 and 8 print true. Each object is still an Error or an Array.

Built-in classes have a few extra rules when you extend them. The later lesson covers those.

Common misconceptions

Some questions ask about ideas. Others ask what code prints. For code, follow the links and the constructor order before you choose.

Key takeaways

• extends links the child class to the parent class. It does not copy methods.
• A child's constructor must call super() before it uses this.
• The parent's fields are set inside super(). The child's fields are set right after it returns.
• A child method can replace a parent method, or build on it with super.method().
• super starts from the method's home, [[HomeObject]]. A copied method keeps its first home.

Up next: Static members & static blocks.