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 Intro

ECMAScript 2015, or ES6, introduced JavaScript Classes, which serve as blueprints for creating JavaScript Objects.

JavaScript Class Syntax

Use the class keyword to define a class, and always include a method called constructor().

Syntax

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

Example

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

The example above defines a class called “Car,” which has two initial properties: “name” and “year.”

A JavaScript class is not an object; it is a blueprint for creating JavaScript objects.

Using a Class

Once you have a class, you can use it to instantiate objects.

Example

const myCar1 = new Car(“Ford”, 2014);
const myCar2 = new Car(“Audi”, 2019);

The example above uses the Car class to instantiate two Car objects.

The constructor method is automatically invoked when a new object is instantiated.

The Constructor Method

The constructor method is a special method that:

Must be named exactly “constructor”
Is automatically executed when a new object is created
Initializes the object’s properties
If not defined, JavaScript will provide a default empty constructor method.

Class Methods

The constructor method is a special method that:

Must be named exactly “constructor”
Is automatically executed when a new object is created
Initializes the object’s properties
If not defined, JavaScript will provide a default empty constructor method.

Syntax

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

Define a class method called “age” that returns the age of the Car.

Example

class Car {
constructor(name, year) {
    this.name = name;
    this.year = year;
}
age() {
    const date = new Date();
    return date.getFullYear() – this.year;
}
}

const myCar = new Car(“Ford”, 2014);
document.getElementById(“demo”).innerHTML =
“My car is “ + myCar.age() + ” years old.”;

You can pass parameters to class methods.

class Car {
constructor(name, year) {
    this.name = name;
    this.year = year;
}
  age(x) {
    return x – this.year;
}
}

const date = new Date();
let year = date.getFullYear();

const myCar = new Car(“Ford”, 2014);
document.getElementById(“demo”).innerHTML=
“My car is “ + myCar.age(year) + ” years old.”;

Browser Support

The following table shows the first browser version that fully supports Classes in JavaScript:

js 20

“use strict”

Class syntax must be written in “strict mode.” Failure to adhere to “strict mode” rules will result in an error.

Example

In “strict mode,” using a variable without declaring it will result in an error.

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