7. Classes, methods and this

Spot the bug

const a = { x: 0, y: 0, vx: 1, vy: 2 };
const b = { x: 5, y: 1, vx: 0, vy: 1 };
const c = { x: 2, y: 7, vX: 3, vy: 0 };

function move(p) {
  p.x = p.x + p.vx;
}
move(c); // c.x becomes NaN

c was typed with vX instead of vx, so c.vx is undefined, and 2 + undefined is NaN (JavaScript’s “not a number”). Nothing warned you. With a thousand particles written by hand, typos like this are certain. And move floats around on its own, separate from the data it works on.

You want a single blueprint that every particle is built from, with the code that works on particles kept right next to it.

class, constructor and new

class Particle {
  constructor(x, vx) {
    this.x = x;
    this.vx = vx;
  }
}

const p = new Particle(3, 1);
console.log(p.x, p.vx); // 3 1
console.log(p);
// Particle { x: 3, vx: 1 }

new Particle(3, 1) builds a particle. Step through what it does:

class Particle {
  constructor(x, vx) {
    this.x = x;
    this.vx = vx;
  }
}
const p = new Particle(3, 1);
const q = new Particle(8, -2);

Methods and this

Functions written inside the class body, next to the constructor, are methods. Here is move, now living with the data:

class Particle {
  constructor(x, vx) {
    this.x = x;
    this.vx = vx;
  }
  move() {
    this.x = this.x + this.vx;
  }
}

const p = new Particle(0, 2);
const q = new Particle(10, -1);
p.move();
q.move();
console.log(p.x, q.x); // 2 9

There’s one move, and two particles. How does move know which one to change? It doesn’t take a parameter. It uses this.

class Particle {
  // constructor as before
  move() {
    this.x = this.x + this.vx;
  }
}
const p = new Particle(0, 2);
const q = new Particle(10, -1);
p.move();
q.move();

Compare that with last chapter. What a function can see is decided by where it is written. What this means is decided by how it is called.

class Particle {
  constructor(x, vx) {
    this.x = x;
    this.vx = vx;
  }
  move() {
    this.x = this.x + this.vx;
  }
}

const ps = [
  new Particle(0, 2),
  new Particle(10, -1),
];
for (let i = 0; i < ps.length; i++) {
  ps[i].move();
}
console.log(ps);
console.log(ps[0] instanceof Particle);
console.log(ps[0].move === ps[1].move);

Losing this

Since this comes from the dot, a method called without a dot has no object to use:

const m = p.move;
m();
// a TypeError: inside move,
// this is undefined

m is the same function, but m() has nothing before a dot, so inside it this is undefined. (Class code always runs in JavaScript’s strict mode, which is what makes it undefined rather than something stranger^[1].) The exact error message differs from browser to browser.

This bites most often with callbacks. Passing p.move passes only the function, not p:

function twice(f) {
  f();
  f();
}

twice(p.move);         // TypeError
twice(() => p.move()); // works

The arrow function keeps the dot: when twice calls it, it calls p.move() properly, with p before the dot.

Which class made it? instanceof

console.log(p instanceof Particle); // true

const fake = { x: 0, vx: 2 };
console.log(fake instanceof Particle);
// false

fake has exactly the same properties, but it wasn’t made by new Particle, and instanceof can tell.

Your turn

class Vec {
  constructor(x, y) {
    // your code here
  }
}

const v = new Vec(3, 4);
console.log(v);

class Stack {
  // your code here
}

const s = new Stack();
s.push(1);
s.push(2);
console.log(s.pop());

What you learned

• A class is a blueprint. Its constructor sets up each object.
• new makes an empty object, runs the constructor with this set to it, and returns it: an instance.
• Methods live in the class body and are shared by all instances.
• Inside a method, this is the object before the dot in the call. A method called without a dot loses its this, so wrap it: () => p.move().
• instanceof checks which class made an object.
• Objects from one constructor tend to share one shape, which helps engines and Viscosity alike.

Next: Map and Set, two built-in classes for looking things up fast.