JavaScript Classes

ECMAScript 2015, also known as ES6, introduced JavaScript classes.

JavaScript class is a template for JavaScript objects.

Syntax of JavaScript class

Use the keyword class Create a class.

Always add a named constructor() method:

Syntax

class ClassName {
  constructor() { ... }
}

Instance

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

The above example creates a class named "Car".

The class has two initial properties: "name" and "year".

JavaScript ClassesNotobject.

It is an object of theTemplate.

Using a class

When you have a class, you can use it to create objects:

Instance

let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);

Try It Yourself

The above example uses Car classto create two Car object.

The constructor method (constructor method) is automatically called when creating a new object.

Constructor method

A constructor is a special method:

  • It must have the exact name of "constructor"
  • Automatically executed when creating a new object
  • Used to initialize object properties
  • If you do not define a constructor, JavaScript will add an empty constructor.

Class methods

The syntax for creating class methods is the same as for object methods.

Use the keyword class to create a class.

Always add the constructor() method.

Then add any number of methods.

Syntax

class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

Create a class method named "age" that returns the car's year:

Instance

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.";

Try It Yourself

You can send parameters to class methods:

Instance

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.";

Try It Yourself

Browser support

The table below indicates the first browser version to fully support JavaScript classes:

Chrome IE Firefox Safari Opera
Chrome 49 Edge 12 Firefox 45 Safari 9 Opera 36
March 2016 July 2015 March 2016 October 2015 March 2016

"use strict"

The syntax in the class must be written in 'strict mode'.

If you do not follow the 'strict mode' rules, you will receive an error message.

Instance

Under 'strict mode', if you use a variable without declaring it, you will get an error:

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    // date = new Date();  // This will not work
    let date = new Date(); // This will work
    return date.getFullYear() - this.year;
  }
}

Try It Yourself

In JS Strict Mode Learn more about 'strict mode' here.