JS Classes

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

JavaScript Classes

JavaScript Class Syntax

Using the keyword class to create a class.

Add a method named constructor():

Syntax

class ClassName {

  constructor() { … }

}

Example

class Car {

  constructor(name, year) {

    this.name = name;

    this.year = year;

  }

}

The above example creates a class named “Car”.

The class consists of two initial properties: “name” and “year”.

A JavaScript class is not an object.

It is a template for JavaScript objects.

Using a Class

The class can be used to create objects:

Example       

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Class</h2>

<p>How to use a JavaScript Class.</p>

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

<script>

class Car {

  constructor(name, year) {

    this.name = name;

    this.year = year;

  }

}

const myCar = new Car(“Ford”, 2014);

document.getElementById(“demo”).innerHTML =

myCar.name + ” ” + myCar.year;

</script>

</body>

</html>

Output

JavaScript Class

How to use a JavaScript Class.

The Constructor Method

The constructor method is a special method:

  • It has to have the exact name “constructor”
  • It is executed automatically when a new object is created
  • It is used to initialize object properties

When a constructor method is not defined, JavaScript adds an empty constructor method.

Class Methods

Class methods are created with the same syntax as object methods.

Using the keyword class creates a class.

Always add a constructor() method.

Adding any number of methods.

Syntax

class ClassName {

  constructor() { … }

  method_1() { … }

  method_2() { … }

  method_3() { … }

}

Creating a Class method named “age”, that returns the Car age:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Class Method</h2>

<p>How to define and use a Class method.</p>

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

<script>

class Car {

  constructor(name, year) {

    this.name = name;

    this.year = year;

}

  age() {

    let date = new Date();

    return date.getFullYear() – this.year;

   }

}

let myCar = new Car(“Ford”, 2014);

document.getElementById(“demo”).innerHTML =

“My car is ” + myCar.age() + ” years old.”;

</script>

</body>

</html>

Output

JavaScript Class Method

How to define and use a Class method.

My car is 8 years old.

Sending parameters to Class methods:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Class Method</h2>

<p>Pass a parameter into the “age()” method.</p>

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

<script>

class Car {

  constructor(name, year) {

    this.name = name;

    this.year = year;

  }

  age(x) {

    return x – this.year;

  }

}

let date = new Date();

let year = date.getFullYear();

let myCar = new Car(“Ford”, 2014);

document.getElementById(“demo”).innerHTML=

“My car is ” + myCar.age(year) + ” years old.”;

</script>

</body>

</html>

Output

JavaScript Class Method

Pass a parameter into the "age()" method.

My car is 8 years old.


Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420