JavaScript Classes

A blueprint for objects

A class describes how to build objects of one kind. You call it with new. Each instance gets the fields you set in constructor and can call the methods you listed on the class.

Under the hood this is still JavaScript’s prototype model. You do not need that picture to write a first class. Think: constructor to set up, methods to do work.

constructor

constructor runs when you write new ClassName(...). Usethis.field = value to store data on the new object. Parameters are the values the caller passes in.

class Book {
  constructor(title, pages) {
    this.title = title;
    this.pages = pages;
  }
}

const first = new Book("Sea charts", 120);
console.log(first.title);
console.log(first.pages);

Forget new and the call is wrong: this will not be a fresh object. Always construct with new.

Methods

Methods are functions listed in the class body without a function keyword. Inside them, this is the instance you called the method on.

class Book {
  constructor(title, pages) {
    this.title = title;
    this.pages = pages;
  }

  label() {
    return this.title + " (" + this.pages + " pages)";
  }
}

const first = new Book("Sea charts", 120);
const second = new Book("Harbor list", 48);
console.log(first.label());
console.log(second.label());

Both books share the label method. Each has its own title andpages. That is the usual split: data on the instance, behavior on the class.

extends

class Child extends Parent makes a child class. The child inherits methods. Its constructor should call super(...) before using this, so the parent can set up its fields first.

class Book {
  constructor(title, pages) {
    this.title = title;
    this.pages = pages;
  }

  label() {
    return this.title + " (" + this.pages + " pages)";
  }
}

class Textbook extends Book {
  constructor(title, pages, subject) {
    super(title, pages);
    this.subject = subject;
  }

  label() {
    return this.subject + ": " + super.label();
  }
}

const math = new Textbook("Algebra", 200, "Math");
console.log(math.label());

super.label() runs the parent method. The child adds a prefix instead of copying the whole parent body.

Class versus object literal

You do not need a class for one settings object. You want a class when you will make several of the same kind and they should share methods.

instanceof

value instanceof ClassName is true when the value was built from that class or a child. It is the usual check after new.

class Task {
  constructor(title) {
    this.title = title;
    this.done = false;
  }
}

const item = new Task("Read chapter");
console.log(item instanceof Task);
console.log(item instanceof Array);

What to remember

• class plus new builds instances.
• constructor stores fields on this.
• Methods use this for the instance you called.
• extends and super reuse a parent class.

Next: JSON — text that looks like an object, and the two functions that convert either way.