Classes & Object-Oriented JavaScript

Blueprints, cookie cutters, and the mystery of `this` solved. Eleven short pages from Sophomore Year of College, about 16 minutes of reading in all.

What you’ll learn

  • What object-oriented programming is
  • Creating classes with constructor and methods
  • Making instances with new
  • Getters and setters
  • Static methods and properties
  • Private fields with #
  • Inheritance with extends and super
  • The four rules of this
  • What prototypes are

The pages

Eleven pages, about 16 minutes.

  1. Why Classes? Imagine you're building a game with lots of characters. Each character has a name, some health, a level, and can do…
  2. Your First Class Here's a class for game characters. Let's break it down. class Character { ... } creates a class called Character. By…
  3. Getters and Setters Sometimes you want something that looks like a property but is actually calculated. For that, classes have getters…
  4. Static Methods and Properties Normally, methods belong to instances: each cookie can do things. But sometimes a function is related to the class as…
  5. Private Fields In Grade 9, you used closures to keep a bank balance private. Classes have their own built-in way to do this: private…
  6. Inheritance: extends and super Let's say our game has different kinds of characters: warriors, wizards and healers. They all have a name and health…
  7. The Mystery of this, Solved We've been bumping into this since Grade 8, and we promised we'd explain it properly in College. Here we are! The…
  8. Prototypes: What Classes Really Are Here's a secret that Professor Semicolon has been dying to tell you. JavaScript didn't have classes until 2015. Before…
  9. When Should You Use Classes? Classes are a great tool, but they're not the only tool. JavaScript is flexible, and lots of excellent JavaScript code…
  10. Mini Project: Virtual Pets Let's build a little virtual pet simulator, in the style of those 1990s keychain pets. Every pet gets hungry, bored…
  11. Recap The key ideas of Sophomore Year, JavaScript classes, on one page. A class is a blueprint for creating objects. Each…

Reading is step one

CurlyScript turns these notes into a game: short questions, an explanation after every answer, and a test at the end of each grade. Free, with nothing to sign up for.

Start learning