Curriculum

JavaScript Basic

JSHome

0/216

JS Versions

0/36

JS Objects

0/15

JS Funtions

0/22

JS Classes

0/3

JS Async

0/10

JS HTML DOM

0/25

JS Browser BOM

0/17

JS Web APIs

0/7

JS AJAX

0/11

JS JSON

0/16

JS vs jQuery

0/4

JS Graphics

0/7

Text lesson

Class Inheritance

To establish class inheritance, use the extends keyword. A class that inherits from another gains all the methods of the parent class.

Example

Define a class called “Model” that inherits the methods from 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();

The super() method refers to the parent class.

By invoking super() in the constructor, we call the parent class’s constructor, gaining access to its properties and methods.

Inheritance promotes code reusability by allowing you to reuse the properties and methods of an existing class when creating a new class.

Getters and Setters

Classes also allow the use of getters and setters. It’s a good practice to use them for your properties, especially if you need to perform specific actions before returning or setting a value.

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

Example

Create a getter and a setter for the “carname” property.

class Car {
constructor(brand) {
    this.carname = brand;
}
get cnam() {
    return this.carname;
}
set cnam(x) {
    this.carname = x;
}
}

const myCar = new Car(“Ford”);

document.getElementById(“demo”).innerHTML = myCar.cnam;

Note: Although the getter is a method, you do not use parentheses when accessing the property value.

The name of the getter or setter method cannot be the same as the property name, such as “carname.”

To differentiate the getter/setter from the actual property, many developers use an underscore (_) prefix before the property name.

Example

You can use the underscore (_) character to distinguish 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;
}
}

const myCar = new Car(“Ford”);

document.getElementById(“demo”).innerHTML = myCar.carname;

To use a setter, apply the same syntax as setting a property value, but without parentheses.

Example

Use a setter to update the carname to “Volvo.”

class Car {
constructor(brand) {
    this._carname = brand;
}
get carname() {
    return this._carname;
}
set carname(x) {
    this._carname = x;
}
}

const myCar = new Car(“Ford”);
myCar.carname = “Volvo”;
document.getElementById(“demo”).innerHTML = myCar.carname;

Hoisting

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

This means you must declare a class before using it.

Example

//You cannot use the class yet.
//myCar = new Car(“Ford”) will raise an error.

class Car {
  constructor(brand) {
    this.carname = brand;
  }
}

//Now you can use the class:
const myCar = new Car(“Ford”)

Note: For other declarations, such as functions, you won’t get an error if you use them before they are declared because JavaScript declarations are hoisted by default (i.e., the declaration is moved to the top).