JavaScript Class Inheritance

Class inheritance

To create class inheritance, please use extends keyword.

Classes created using class inheritance inherit all methods of another class:

Instance

Create a class named 'Model' that inherits the methods of the 'Car' class:

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'I have a ' + this.carname;
  }
}
class Model extends Car {}}
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return this.present() + ', it is a ' + this.model;
  }
}
let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();

Try It Yourself

super() method, we refer to the parent class.

By calling super() When creating a new class, we call the parent class's constructor method to obtain access to the parent class's properties and methods.

Inheritance is very useful for code reusability: reuse existing class properties and methods when creating a new class.

Getter and Setter

The class also allows you to use getter and setter.

It's smart to use getter and setter for your properties, especially if you want to do something special with the value before or after returning them.

If you want to add getter and setter in a class, please use get and set keyword.

Instance

Create a getter and setter for the "carname" property:

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  get cnam() {
    return this.carname;
  }
  set cnam(x) {
    this.carname = x;
  }
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.cnam;

Try It Yourself

Note:Even if the getter is a method, do not use parentheses when you want to get the property value.

The name of the getter/setter method cannot be the same as the property name, which is carname.

Many programmers use the underscore character _ before the property name to separate the getter/setter from the actual property:

Instance

You can use the underscore character to separate the getter/setter from the actual property:

class Car {
  constructor(brand) {
    this._carname = brand;
  }
  get carname() {
    return this._carname;
  }
  set carname(x) {}}
    this._carname = x;
  }
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;

Try It Yourself

If you need to use the setter, please use the same syntax as setting the property value without parentheses:

Instance

Use the setter to change the car name to "Volvo":

class Car {
  constructor(brand) {
    this._carname = brand;
  }
  get carname() {
    return this._carname;
  }
  set carname(x) {}}
    this._carname = x;
  }
}
let myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;

Try It Yourself

Hoisting

Unlike function and other JavaScript declarations, class declarations are not hoisted.

This means that you must declare the class first before you can use it:

Instance

//You cannot use this class yet.
//myCar = new Car("Ford")
//This would raise an error.
class Car {
  constructor(brand) {
    this.carname = brand;
  }
}
//Now you can use this class:
let myCar = new Car("Ford")

Try It Yourself

Note:For other declarations, such as functions, there will be no error when trying to use it before the declaration, because the default behavior of JavaScript declarations is hoisting (moving the declaration to the top).