JavaScript Prototypes For Beginners

JavaScript is a prototype-based language. Lets deconstruct the definition of prototypes in JavaScript.

When you start of learning object orientated programming with JavaScript, you will quickly encounter prototypal inheritance.

A prototype is a member of an object, and can be referenced from an instance. Before we create our own prototype. Lets just see a quick example of how we are already dealing with prototypes.

Lets create an array:

let x = [1, 2]
x.map(a => a + 1) // [2, 3]

x holds an array. x is an instance of Array. x has a reference to all of the prototype properties from Array. So we could for example call Array.prototype.map() function on x

I’m starting to see prototypes everywhere!

Let’s set our own prototype:

// Creates a constructor called Country
class Country {
 constructor(country) { 
  this.country = country
 }
}
// Create a new instance of Country
let sweden = new Country('Sweden')
// sweden is now an object called Country
sweden // Country { country: 'Sweden' } 

Now we want sweden to say hello to the world. This is where prototypes and the prototype-chain comes into play

// Add method to the prototype of the constructor
Country.prototype.helloWorld = function() {
 return `I am a country called ${this.country}`
}

Country has the method helloWorld as a prototype property. sweden is still the same object but we can now reference helloWorld.

sweden.helloWorld() // 'I am a country called Sweden'

The interpreter looks for the helloWorld If no references is found it will start to jump up the prototype chain until the request is satisfied In this case helloWorld can be related to sweden via the prototype chain.

And if we create a new country:

let canada = new Country('Canada')

Same goes for canada, the new instance of Country can also access the prototypes. This is how a prototype and the prototype chain works. It works as a link between the function and its objects.

I want to share my constructors prototype with another constructor?

Lets say we want to add PlanetA prototype object to PlanetB

// Constructor PlanetA
class PlanetA {
 constructor(instance) {
  this.instance = instance
 }
 // prototype method
 helloWorld() {
  return `I am a instance called ${this.instance}`
 }
}
let x = new PlanetA('x')
x.helloWorld() // I am a instance called x

To demonstrate the flexibility of prototypal inheritance we will link the prototypes of our instance of PlanetA to PlanetB. We can use Object.setPrototypeOf() to do that.

// Constructor PlanetB
class PlanetB {
 constructor(instance) {
  this.instance = instance
 }
}
let y = new PlanetB('y')
Object.setPrototypeOf(y, x)
y.helloWorld() // I am a instance called y

This was a basic introduction to the concept of inheritance in JavaScript. The key is to know that you have the ability to dynamic instantiate objects without any internal properties but still be able to access methods on the prototype chain.

There is more details to prototypes and ways of handling inheritance in JavaScript, depending on how you choose to factor your objects. The ‘class’ keyword is syntactic sugar on constructor functions. There is no such thing as class inheritance in JavaScript only a prototypal way of inheritance.

I hope you found this helpful and that you can now feel more comfortable talking about prototypes and how OOP works in JavaScript.

Enjoy your code.