Classes, this and Prototypes

Introduction

When a program grows, you often need many objects of the same kind: many users, many products, many enemies in a game. A class is a blueprint for making them. This lesson also explains this, the most confusing word in JavaScript, and what happens underneath.

Classes

A class describes what its objects have (data) and what they can do (methods). new builds an object from it.

• constructor runs when you use new. It sets up the object.
• this refers to the object being worked on, here rex or fido.

Inheritance

extends lets a class build on another. super calls the parent.

A Cat is an Animal that gets everything for free and changes only what is different.

How is this decided?

For regular functions, this is decided by how the function is called, not where it is written.

• obj.method(): this is obj.
• A plain call, method(): this is undefined in strict mode (and in classes).
• new Thing(): this is the new object.

Taking a method out of its object loses this. Two fixes:

• bind makes a copy of the function with this fixed.
• Arrow functions have no this of their own. They use the this of the code around them. In the timer example, the arrow function inside start uses the this of start, so it updates timer.seconds. That makes arrows handy for callbacks inside methods, but a poor choice for object methods themselves.

Under the hood: prototypes

JavaScript classes are built on prototypes. Every object has a hidden link to another object, its prototype. When you look for a property and it is not on the object, JavaScript follows the link, then the next, until it finds it or reaches the end. This is the prototype chain.

bark is not on rex itself. It lives on Dog.prototype, shared by every dog, and found through the chain. That is why a thousand dogs do not need a thousand copies of bark.

Try it yourself

Create a class BankAccount with a balance, and methods deposit(amount) and withdraw(amount). Make withdraw throw an error if there is not enough money.

Summary

• Classes are blueprints. constructor sets up the object and this is the object in use.
• extends and super give inheritance.
• this depends on how a function is called. Use bind or arrow functions to keep it.
• Under the hood, objects find shared methods through the prototype chain.