Console Learner — An interactive JavaScript course.

5.1 Classes vs. Prototypes

JavaScript objects are prototype-based, not class-based. It is a more generic model:

  1. Ad-hoc singleton objects are easily created and very usable (e.g. most instances of Object).
  2. Properties and methods can be added or modified at any time to any object.
  3. Any object instance can be reused (cloned or copied), without the need to define a class.
  4. Prototype modifications affects all instances, even those previously created.

Nonetheless, words like class and similar are frequently used as synonyms for prototype, etc.

var A = class {
    a = 123;
    sum() {
        return this.a + this.b;

The class syntax (introduced in ES6) simplifies the creation of prototype chains. Note that method functions are declared with the shorthand syntax, omitting the function keyword.
print(new A(), true);

Fields are added to the instance and set to undefined by default.
Methods are non-enumerable (i.e. "invisible") and added to the prototype, which makes it safe to use Object.keys() and similar.
var o = new A();
o.b = 77;

There is little difference in practical usage, compared to objects created by an old-style constructor function.
var B = class extends A {
    constructor(val) {
        this.b = val;

Creating a subclass is easy using the extends keyword. The special constructor method is automatically called when new objects are created.
print(new B(77), true);

Instance fields from the parent class are initialized also in the subclass.

The console allows you to interact with the course material and examples. Use the following keys:

A special logging function is also available:

Need more magic? Check out the other developer tools on this site.