Prototypes & Classes in

About Prototypes & Classes

JavaScript includes the capabilities for object-oriented programming (OOP). In OOP, you want to create objects (instances) from "templates" (classes) so that they include certain data and functionality. The data properties are called fields in the OOP context, the function properties are called methods.

JavaScript did not have classes at all before they were added to the language specification in 2015 but allowed for object-oriented programming using prototype-based inheritance. And even though a class keyword is available nowadays, JavaScript is still a prototype-based language.

To understand what it means to be a prototype-based language and how JavaScript actually works, we will go back to the time when there were no classes.

Prototype Syntax

Constructor Function

In JavaScript, the template (class) is facilitated by a regular function. When a function is supposed to be used as such a template, it is called a constructor function and the convention is that the function name should start with a capital letter. Instances (objects) are derived from the template using the new keyword when invoking the constructor function.

function Car() {
  // ...
}

const myCar = new Car();
const yourCar = new Car();

It is important to note that in JavaScript, the instances and the constructor function keep a relationship to each other even after the instances were created. Every instance object includes a hidden, internal property referred to as [[prototype]] in the language specification. It holds a reference to the value of the prototype key of the constructor function. Yes, you read that correctly, a JavaScript function can have key/value pairs because it is also an object behind the scenes.

Since 2015, [[prototype]] can be accessed via Object.getPrototypeOf(). Before that, it was accessible via the key __proto__ in many environments.

Do not confuse the prototype of an object ([[prototype]]) with the prototype property of the constructor function.

Instance Fields

Often, you want all the derived objects (instances) to include some fields and pass some initial values for those when the object is constructed. This can be facilitated via the this keyword. Inside the constructor function, this represents the new object that will be created via new. this is automatically returned from the constructor function when it is called with new.

That means we can add fields to the new instance by adding them to this in the constructor function.

function Car(color, weight) {
  this.color = color;
  this.weight = weight;
  this.engineRunning = false;
}

const myCar = new Car('red', '2mt');
myCar.color;
// => 'red'
myCar.engineRunning;
// => false

Instance Methods

Methods are added via the prototype property of the constructor function. Inside a method, you can access the fields of the instance via this. This works because of the following general rule.

When a function is called as a method of an object, its this is set to the object the method is called on. ¹

function Car() {
  this.engineRunning = false;
  // ...
}

Car.prototype.startEngine = function () {
  this.engineRunning = true;
};

Car.prototype.addGas = function (litre) {
  // ...
};

const myCar = new Car();
myCar.startEngine();
myCar.engineRunning;
// => true

The Prototype Chain

myCar in the example above is a regular JavaScript object and if we would inspect it (e.g. in the browser console), we would not find a property startEngine with a function as a value directly inside the myCar object. So how does the code above even work then?

The secret here is called the prototype chain. When you try to access any property (field or method) of an object, JavaScript first checks whether the respective key can be found directly in the object itself. If not, it continues to look for the key in the object referenced by the [[prototype]] property of the original object. As mentioned before, in our example [[prototype]] points to the prototype property of the constructor function. That is where JavaScript would find the startEngine function because we added it there.

function Car() {
  // ...
}

Car.prototype.startEngine = function () {
  // ...
};

And the chain does not end there. The [[prototype]] property of Car.prototype (myCar.[[prototype]].[[prototype]]) references Object.prototype (the prototype property of the Object constructor function). It contains general methods that are available for all JavaScript objects, e.g. toString(). The [[prototype]] of Object is usually null so the prototype chain ends there. In conclusion, you can call myCar.toString() and that method will exist because JavaScript searches for that method throughout the whole prototype chain. You can find a detailed example in the MDN article "Inheritance and the prototype chain".

Dynamic Methods (Adding Methods to All Existing Instances)

JavaScript allows you to add methods to all existing instances even after they were created.

We learned that every instance keeps a reference to the prototype property of the constructor function. That means if you add an entry to that prototype object, that new entry (e.g. a new method) is immediately available to all instances created from that constructor function.

function Car() {
  this.engineRunning = false;
}

const myCar = new Car();
// Calling myCar.startEngine() here would result in "TypeError:
// myCar.startEngine is not a function".

Car.prototype.startEngine = function () {
  this.engineRunning = true;
};

myCar.startEngine();
// This works, even though myCar was created before the method
// was added.

In theory, dynamic methods can even be used to extend the functionality of built-in objects like Object or Array by modifying their prototype. This is called monkey patching. Because this change affects the whole application, it should be avoided to prevent unintended side effects. The only reasonable use case is to provide a polyfill for a missing method in older environments.

Class Syntax

Nowadays, JavaScript supports defining classes with a class keyword. This was added to the language specification in 2015. On the one hand, this provides syntactic sugar that makes classes easier to read and write. The new syntax is more similar to how classes are written in languages like C++ or Java. Developers switching over from those languages have an easier time adapting. On the other hand, class syntax paves the way for new language features that are not available in the prototype syntax.

Class Declarations

With the new syntax, classes are defined with the class keyword, followed by the name of the class and the class body in curly brackets. The body contains the definition of the constructor function, i.e. a special method with the name constructor. This function works just like the constructor function in the prototype syntax. The class body also contains all method definitions. The syntax for the methods is similar to the shorthand notation we have seen for adding functions as values inside an object, see Concept Objects.

class Car {
  constructor(color, weight) {
    this.color = color;
    this.weight = weight;
    this.engineRunning = false;
  }

  startEngine() {
    this.engineRunning = true;
  }

  addGas(litre) {
    // ...
  }
}

const myCar = new Car();
myCar.startEngine();
myCar.engineRunning;
// => true

Similar to function declarations and function expressions, JavaScript also supports class expressions in addition to the class declaration shown above.

Keep in mind that behind the scenes, JavaScript is still a prototype-based language. All the mechanisms we learned about in the "Prototype Syntax" section above still apply.

Private Fields, Getters and Setters

By default, all instance fields are public in JavaScript. They can be directly accessed and assigned to.

Adding actual private fields to the language specification is a work in progress, see the proposal document for details.

In the meantime, you can make use of the established convention that fields and methods that start with an underscore should be treated as private. They should never be accessed directly from outside the class.

Private fields are sometimes accompanied by getters and setters. With the keywords get and set you can define functions that are executed when a property with the same name as the function is accessed or assigned to.

class Car {
  constructor() {
    this._mileage = 0;
  }

  get mileage() {
    return this._mileage;
  }

  set mileage(value) {
    throw new Error(`Mileage cannot be manipulated, ${value} is ignored.`);
    // Just an example, usually you would not provide a setter in this case.
  }
}

const myCar = new Car();
myCar.mileage;
// => 0
myCar.mileage = 100;
// => Error: Mileage cannot be manipulated, 100 is ignored.

Class Fields and Class Methods

In OOP, you sometimes want to provide utility fields or methods that do not depend on the specific instance. Instead, they are defined for the class itself. This can be achieved with the static keyword.

class Car {
  static type = 'vehicle';

  static isType(targetType) {
    return targetType === 'vehicle';
  }
}

Car.type;
// => 'vehicle'

Car.isType('road sign');
// => false

Class-Based Inheritance

Besides the type of inheritance along the prototype chain we saw earlier, you can also represent inheritance between classes in JavaScript. This is covered in the Concept Inheritance.

---

1. this Examples - As an object method, MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#as_an_object_method (referenced December 03, 2021) ↩