js super

The super keyword is used to call functions on an object's parent.

The super.prop and super[expr] expressions are valid in any method definition in both classes andobject literals.

Syntax

super([arguments]); // calls the parent constructor.
super.functionOnParent([arguments]);

Description

When used in a constructor, the super keyword appears alone and must be used before the thiskeyword can be used. This keyword can also be used to call functions on a parent object.

Example

Using super in classes

This code snippet is taken from the classes sample (live demo).

class Polygon {
  constructor(height, width) {
    this.name = 'Polygon';
    this.height = height;
    this.width = width;
  }
  sayName() {
    console.log('Hi, I am a ', this.name + '.');
  }
}

class Square extends Polygon {
  constructor(length) {
    this.height; // ReferenceError, super needs to be called first!
    
    // Here, it calls the parent class' constructor with lengths
    // provided for the Polygon's width and height
    super(length, length);
    
    // Note: In derived classes, super() must be called before you
    // can use 'this'. Leaving this out will cause a reference error.
    this.name = 'Square';
  }

  get area() {
    return this.height * this.width;
  }

  set area(value) {
    this.area = value;
  } 
}

Super-calling static methods

You are also able to call super on static methods.

class Human {
  constructor() {}
  static ping() {
    return 'ping';
  }
}

class Computer extends Human {
  constructor() {}
  static pingpong() {
    return super.ping() + ' pong';
  }
}
Computer.pingpong(); // 'ping pong'

Deleting super properties will throw

You can not use the delete operator and super.prop or super[expr] to delete a parent class' property, it will throw a ReferenceError.

class Base {
  constructor() {}
  foo() {}
}
class Derived {
  constructor() {}
  delete() {
    delete super.foo;
  }
}

new Derived().delete(); // ReferenceError: invalid delete involving 'super'.

Super.prop can not overwrite non-writable properties

When defining non-writable properties with e.g. Object.defineProperty, super can not overwrite the value of the property.

class X {
  constructor() {
    Object.defineProperty(this, "prop", {
      configurable: true,
      writable: false, 
      value: 1
    });
  } 
  f() { 
    super.prop = 2;
  }
}

var x = new X();
x.f();
console.log(x.prop); // 1

Using super.prop in object literals

Super can also be used in the object initializer / literal notation. In this example, two objects define a method. In the second object, super calls the first object's method. This works with the help ofObject.setPrototypeOf() with which we are able to set the prototype of obj2 to obj1, so that super is able to find method1 on obj1.

var obj1 = {
  method1() {
    console.log("method 1");
  }
}

var obj2 = {
  method2() {
   super.method1();
  }
}

Object.setPrototypeOf(obj2, obj1);
obj2.method2(); // logs "method 1"