JavaScript Prototype

Every constructor function has a property on it called prototype which is an object. This prototype object has a property on it called constructor which points back to the original constructor function.

This prototype property can have methods and properties placed on it. These methods and properties are shared and accessible like any object that is created from that constructor function when the new keyword is used. Anytime an object is created using the 'new' keyword, a property called "__proto__" gets created, linking the object and the prototype property of the constructor function.

Lets define a constructor function Person with a property called name.

function Person(name) {
    this.name = name;
}

Functions are basically objects in Javascript. So Person happens to be a function object. Now when Javascript processes functions, it creates 2 objects. The second object that gets created for every function is the prototype object. To access this prototype object, it turns out that a property by the name 'prototype' gets created on function object that points to the prototype object. So to access this property, we will type Person.prototype as below:

This applies to all functions. Now I will create two objects from the constructor function using the new keyword.

var elie = new Person("Elie");
var colt = new Person("Colt");

Since I have used new keyword, a property has been added to each of these objects called __proto__ which points to the prototype object on the Person function constructor.

var elie = new Person("Elie");
var colt = new Person("Colt");

elie.__proto__ === Person.prototype
true

To validate this, we can set a custom property on Person.prototype and try to access it from elie.__proto__

So they are pointing to the same object.

Also, the prototype object has a property on it called constructor which points back to the original function.

Person.prototype.constructor === Person
true

Now let's write some code and use prototype object.

function Person(name, age) {
   this.name = name;
   this.age = age;
}

Person.prototype.eat = function() {
   console.log('I eat');
}

Person.prototype.sleep = function() {
   console.log('I sleep');
}

var elie = new Person('Elie', 20);

Check the output below in your browser console. You will note that Javascript will first search for sleep property in the elie object. If it isn’t there, then JavaScript will search for it in the object’s prototype.

Please note that you used the new keyword to create elie object. If you had invoked the Person function simply like below:

var elie = Person('Elie', 20);

then this is how the constructor should look like:

function Person(name, age) {
   var person = Object.create(Person.prototype);
   person.name = name;
   person.age = age;
   return person;
}

As of ES6, Javascript has now a class keyword. So we can refactor the code as follows:

class Person {
   constructor(name, age) {
      this.name = name;
   this.age = age;
   }

   eat() {
      console.log(this.name + ' eats.');
   }

   sleep() {
      console.log(this.name + ' sleeps.');
   }
}

var elie = new Person('Elie', 20);

This new way is just syntactical sugar over the existing way that we saw earlier. Now let's say that we want to get the prototype of elie. So use Object.getPrototypeOf() and pass in the specific instance of the object like below:

var proto = Object.getPrototypeOf(elie);

NOTE: Arrow functions don't have their own this keyword. As a result, arrow functions cannot be constructor functions, and if you try to invoke an arrow function using new keyword, it will give you an error. And so there is no prototype property in such functions.

const person = () => {}
const elie = new Person()  // Error: Person not a constructor

Person.prototype // undefined