Class Inheritance

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

Class Inheritance

To create a class inheritance, use the extends keyword.

A class created with a class inheritance inherits all the methods from another class.

Example

Create a class named “Model” which will inherit the methods from the “Car” class.

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Class Inheritance</h2>

<p>Use the “extends” keyword to inherit all methods from another class.</p>

<p>Use the “super” method to call the parent’s constructor function.</p>

<p id=”demo”></p>

<script>

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();

</script>

</body>

</html>

Output

JavaScript Class Inheritance

Use the "extends" keyword to inherit all methods from another class.

Use the "super" method to call the parent's constructor function.

Getters and Setters

Classes also enable you to use getters and setters.

If you are looking to do something special with the value before returning them, or before you set them, you may use getters and setters.

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

Example

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

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Class Gettter/Setter</h2>

<p>A demonstration of how to add getters and setters in a class, and how to use the getter to get the property value.</p>

<p id=”demo”></p>

<script>

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;

</script>

</body>

</html>

Output

JavaScript Class Gettter/Setter

A demonstration of how to add getters and setters in a class, and how to use the getter to get the property value.

Ford

The name of the getter/setter method must not be the same as the name of the property, in this case, carname.

You may use an underscore character _ before the property name to separate the getter/setter from the actual property.

Example

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

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Class Gettter/Setter</h2>

<p>Using an underscore character is common practice when using getters/setters in JavaScript, but not mandatory, you can name them anything you like, but not the same as the property name.</p>

<p id=”demo”></p>

<script>

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;

</script>

</body>

</html>

Output

JavaScript Class Gettter/Setter

Using an underscore character is common practice when using getters/setters in JavaScript, but not mandatory, you can name them anything you like, but not the same as the property name.

Ford

To use a setter, use the same syntax as when you set a property value, without parentheses.

Example

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

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Class Setter</h2>

<p>When using a setter to set a property value, you do not use parantheses.</p>

<p id=”demo”></p>

<script>

class Car {

  constructor(brand) {

    this._carname = brand;

  }

  set carname(x) {

    this._carname = x;

  }

  get carname() {

    return this._carname;

  }

}

let myCar = new Car(“Ford”);

myCar.carname = “Volvo”;

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

</script>

</body>

</html>

Output

JavaScript Class Setter

When using a setter to set a property value, you do not use parantheses.

Volvo

Hoisting

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

You must declare a class before you can use it.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Classes are not hoisted</h2>

<p>You will get an error if you try to use a class before it is declared.</p>

<p id=”demo”></p>

<script>

//You cannot use the class yet.

//myCar = new Car(“Ford”)

//This would raise an error.

class Car {

  constructor(brand) {

    this.carname = brand;

  }

}

//Now you can use the class:

let myCar = new Car(“Ford”)

</script>

</body>

</html>

Output

JavaScript Classes are not hoisted

You will get an error if you try to use a class before it is declared.