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.

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

When creating a class, you do not need to rewrite new data members and member functions; you only need to specify that the new class inherits the members of an existing class. This existing class is called thebase class (parent class), and the new class is called thederived class (child class)。

Inheritance represents ais arelationship. For example, a mammal is an animal, a dog is a mammal, therefore, a dog is an animal, and so on.

The code is as follows:

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

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

Example

class Site { constructor(name) { this.sitename = name; } present() { return 'I like' + this.sitename; } } class Example extends Site { constructor(name, age) { super(name); this.age = age; } show() { return this.present() + ', it was founded' + this.age + 'year.'; } } let noob = new Example("Example", 5); document.getElementById("demo").innerHTML = noob.show();

Try it Yourself »

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

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

Inheritance is useful for code reusability.

JavaScript does not have traditional classes like other programming languages; it is based on a prototype inheritance model.

ES6 introduced the class andclasskeyword, but the underlying mechanism is still based on prototype inheritance.

Using Prototype Chain Inheritance

In the following example, Animal is a base class and Dog is a subclass that inherits from Animal. Dog.prototype uses Object.create(Animal.prototype) to create a new object that inherits the methods and properties of Animal.prototype. By setting Dog.prototype.constructor to Dog, the constructor on the inheritance chain is ensured correct.

Example

function Animal(name) { this.name = name; } Animal.prototype.eat = function() { console.log(this.name + " is eating."); }; function Dog(name, breed) { Animal.call(this, name); this.breed = breed; } //Establish the prototype chain so that Dog inherits from Animal Dog.prototype = Object.create(Animal.prototype); Dog.prototype.constructor = Dog; Dog.prototype.bark = function() { console.log(this.name + " is barking."); }; var dog = new Dog("Buddy", "Labrador"); dog.eat(); //Call the method inherited from Animal dog.bark(); //Call Dog's method

Using ES6 Class Inheritance

ES6 introduced the class keyword, making class definition and inheritance clearer. The extends keyword is used to establish an inheritance relationship, and the super keyword is used to call the parent class's constructor in the subclass constructor.

Example

class Animal { constructor(name) { this.name = name; } eat() { console.log(this.name + " is eating."); } } class Dog extends Animal { constructor(name, breed) { super(name); this.breed = breed; } bark() { console.log(this.name + " is barking."); } } const dog = new Dog("Buddy", "Labrador"); dog.eat(); dog.bark();

Whether using prototype chain inheritance or ES6 class inheritance, similar inheritance effects can be achieved. When choosing a method, you can decide based on personal preference and project requirements.

Getters and Setters

In classes, we can use getters and setters to get and set values. Getters and setters need to be executed in strict mode.

Getters and setters make operations on properties very flexible.

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

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

Example

class Example { constructor(name) { this.sitename = name; } get s_name() { return this.sitename; } set s_name(x) { this.sitename = x; } } let noob = new Example("Example"); document.getElementById("demo").innerHTML = noob.s_name;

Try it Yourself »

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

The names of getter/setter methods cannot be the same as the property name; in this example, the property is named sitename.

Many developers use an underscore character before the property name_to separate the getter/setter from the actual property:

The following example uses an underscore_to set the property, and creates the corresponding getter/setter methods:

Example

class Example { constructor(name) { this._sitename = name; } get sitename() { return this._sitename; } set sitename(x) { this._sitename = x; } } let noob = new Example("Example"); document.getElementById("demo").innerHTML = noob.sitename;

Try it Yourself »

To use a setter, use the same syntax as when setting a property value. Although set is a method, it should be withoutparentheses：

Example

class Example { constructor(name) { this._sitename = name; } set sitename(x) { this._sitename = x; } get sitename() { return this._sitename; } } let noob = new Example("Example"); noob.sitename = "EXAMPLE"; document.getElementById("demo").innerHTML = noob.sitename;

Try it Yourself »

Hoisting

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

You need to declare your class first and then access it; otherwise, code like the following will throw a ReferenceError:

Example

//You cannot use the class like this here because it has not been declared yet. //noob = new Example("Example") //Error class Example { constructor(name) { this.sitename = name; } } //The class can be used here. let noob = new Example("Example")

Using it without declaration will cause an error:

If it is declared before use, it executes normally:

Other extensions