JavaScript Class Inheritance

JavaScript class inheritance uses the extends keyword.

Inheritance allows us to define a class based on another class, making it easier to create and maintain an application.

The super() method is used to call the constructor of the parent class.

When creating a class, you don't need to rewrite new data members and member functions; you just need to specify that the new class inherits members from an existing class. This existing class is called the base class (parent class), and the new class is called the derived class (child class).

Inheritance represents an is a relationship. For example, mammals are animals, dogs are mammals, so dogs are animals, and so on.

Here is the code:

// Base class
class Animal {
    // eat() function
    // sleep() function
};

// Derived class
class Dog extends Animal {
    // bark() function
};

The following example creates a class "tutorialpro" that inherits from the "Site" class:

Example

class Site {
  constructor(name) {
    this.sitename = name;
  }
  present() {
    return '我喜欢' + this.sitename;
  }
}

class tutorialpro extends Site {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
  show() {
    return this.present() + ', 它创建了 ' + this.age + ' 年。';
  }
}

let noob = new tutorialpro("tutorialpro.org", 5);
document.getElementById("demo").innerHTML = noob.show();

The super() method references the parent class's constructor.

By calling the super() method in the constructor, we invoke the parent class's constructor, allowing us to access its properties and methods.

Inheritance is useful for code reusability.

Getter and Setter

Within classes, we can use getters and setters to retrieve and set values. Getters and setters must be executed in strict mode.

Getters and setters allow us to manipulate properties flexibly.

To add getters and setters in a class, we use the get and set keywords.

The following example creates a getter and setter for the sitename property:

Example

class tutorialpro {
  constructor(name) {
    this.sitename = name;
  }
  get s_name() {
    return this.sitename;
  }
  set s_name(x) {
    this.sitename = x;
  }
}

let noob = new tutorialpro("tutorialpro.org");

document.getElementById("demo").innerHTML = noob.s_name;

Note: Even though a 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. In this case, the property is named sitename.

Many developers use an underscore character _ before the property name to distinguish the getter/setter from the actual property:

The following example uses an underscore _ to set the property and creates corresponding getter/setter methods:

Example

class tutorialpro {
  constructor(name) {
    this._sitename = name;
  }
  get sitename() {
    return this._sitename;
  }
  set sitename(x) {
    this._sitename = x;
  }
}

let noob = new tutorialpro("tutorialpro.org");

document.getElementById("demo").innerHTML = noob.sitename;

To use a setter, use the same syntax as when setting a property value. Although set is a method, it should not be used with parentheses:

Example

class tutorialpro {
  constructor(name) {
    this._sitename = name;
  }
  set sitename(x) {
    this._sitename = x;
  }
  get sitename() {
    return this._sitename;
  }
}

let noob = new tutorialpro("tutorialpro.org");
noob.sitename = "tutorialpro";
document.getElementById("demo").innerHTML = noob.sitename;

Hoisting

An important difference between function declarations and class declarations is that function declarations are hoisted, while class declarations are not.

You need to declare your class before accessing it; otherwise, code like the following will throw a ReferenceError:

Example

// Cannot use the class here, as it has not been declared
// noob = new tutorialpro("tutorialpro.org")
// Throws an error

class tutorialpro {
  constructor(name) {
    this.sitename = name;
  }
}

// Can use the class here
let noob = new tutorialpro("tutorialpro.org")

Using a class before it is declared will throw an error:

Using a class after it is declared will work correctly: