ES6 Lesson #9 - Inheritance

In es6 classes, constructor inheritance from other classes is possible, as well as their properties and methods.

In this example, we will create the Task class and its subclass, which will inherit the constructor of the main class.

class Task {
  constructor() {
    console.log("Create task")
  }
}

class SubTask extends Task {

}

let task = new Task();
let subtask = new SubTask();

console.log(task);
console.log(subtask );

If you try to create a constructor in the subclass, you will get an error, since the subclass inherits the constructor of the parent.

In order to create the constructor, there is a super() function inside the constructor of the subclass, what redirect main constructor in child. The example also shows how to pass properties in a child constructor.

class Task {
  constructor(title) {
     this.title = title;
     this.done = false;
     console.log("Create task");
  }
}

class SubTask extends Task {
  constructor(title) {
    super(title);
    console.log("Create subtasktask");
  }
}

let task = new Task('Learn jаvascript');
let subtask = new SubTask('Learn ES6');

console.log(task)
console.log(subtask)

The inheritance function Super () must be called first in the constructor, or es6 gives an error.

You can also pass or access the parent class inside the subclass, simply passing it as a property. This method is rarely used, but can sometimes be useful.

class Task {
   constructor(title) {
     this.title = title;
     this.done = false;
     console.log("Create task");
   }
}

class SubTask extends Task {
  constructor(title, parent) {
    super(title)
    this.parent = parent;
  }
}

let task = new Task('Learn jаvascript');
let subtask = new SubTask('Learn ES6', task);

console.log(task)
console.log(subtask)

In addition to the constructor, subclass automatically inherits methods.

class Task {
   constructor(title) {
     this.title = title;
     this.done = false;
     console.log("Create task");
   }
  
   complete() {
     this.done = true;
     console.log(`Task "${this.title}" complete`);
   }
}

class SubTask extends Task {
  constructor(title, parent) {
    super(title)
    this.parent = parent;
  }
}

let task = new Task('Learn jаvascript');
let subtask = new SubTask('Learn ES6', task);

task.complete();
subtask.complete();

If you need a method in the subclass with the same name as the parent, you can overwrite it, just declare it in the subclass, and the main class method will not be passed.

class Task {
  constructor(title) {
    this.title = title;
    this.done = false;
    console.log("Create task");
  }
  
  complete() {
    this.done = true;
    console.log(`Task "${this.title}" complete`);
  }
}

class SubTask extends Task {
  constructor(title, parent) {
    super(title)
    this.parent = parent;
  }
  complete() {
    this.done = true;
    console.log(`New Subclass Method`);
  }
}

let task = new Task('Learn jаvascript');
let subtask = new SubTask('Learn ES6', task);

task.complete();
subtask.complete();

If you need to supplement the parent method in the subclass, you need to create a method with the same name, and inside it call the super() with a call to the parent method.

class Task {
  constructor(title) {
    this.title = title;
    this.done = false;
    console.log("Create task");
  }
  
  complete() {
    this.done = true;
    console.log(`Task "${this.title}" complete`);
  }
}

class SubTask extends Task {
  constructor(title, parent) {
    super(title)
    this.parent = parent;
  }
  complete() {
    super.complete();
    console.log(`New Subclass Method`);
  }
}

let task = new Task('Learn jаvascript');
let subtask = new SubTask('Learn ES6', task);

task.complete();
subtask.complete();

In the same way, subclass can inherit get & set and static methods.