A Novice Guide for JavaScript Class Patterns

In JavaScript, there are a lot of ways to make classes. first what is the class?
JavaScript is an Object-based language, and every object in JavaScript has a hidden internal property called Prototype that can be used to extend object properties and methods. when We’ll check:-

function sayHello() {return ‘Hello World’};
sayHello.prototype

we’ll see something like this:

{constructor: f}

It means it’s an object when we’ll open {constructor: f}we’ll see another Object __proto__ and every object has that hidden property that looks something like this :

__proto__: {//some methods and function}

There are 4 ways to make classes.

1:- Factory Class
2:- Prototype-based ( Pseudoclassical Pattern)
3:- Class Constructor

1:- Factory Class

A factory function is a function that returns a (presumably new) object. In JavaScript, any function can return an object. When it does so without the new keyword, it’s a factory function. for better understanding see the example below:

function createAnimal(name, age) {
  let animal = Object.create({});
  animal.name = name;
  animal.age = age;
  return animal;
}
let dog = createAnimal('Dog', 15);
console.log(dog);

here we are creating a function which name is createAnimal and we are passing two parameter name and age in it. now when we are calling the function a local execution context is created. inside this local execution context a local memory (it stores all the variables of function scope) will be created where it sees that there is a variable (which name is animal), because we are using Object.create() with an empty ({}) object. so now animal will be Object, now we are assigning property name and age and then we are returning Object (animal), now the value is returned and stored in a variable dog (execution context is deleted when the function returns something).

2:- Prototype-based ( Pseudoclassical Pattern)

In prototypal based class we use a new keyword for creating Objects. now, what new do? it creates a new plain object then it creates a link between function and that new Object now we can set the prototype for adding methods (Object property which contains function as value). and in last we have to return an object for getting the value.

function CreateAnimal(name, age) {
  this.name = name;
  this.age = age;
}
var dog = new CreateAnimal('dog', 10);
console.log(dog);
// CreateAnimal {name: 'dog', age: 10}

we created a function CreateAnimal which is taking two parameters name and age, when we call the function with new keyword it is going to create a new empty object, then we are passing the argument ‘dog’ and 10. now as we know when a function is called a local execution is going to create. inside execution context there will be a local memory, inside local memory it will store name = dog and age = 10 and it will return an object with variable ‘name’ and ‘dog’ as the key of an object and ‘dog’ and 10 as value and it will be stored in object dog. now execution context will be deleted.
Now how to set method in an object using prototype.

CreateAnimal.prototype.eat = function() {
  return `${this.name} eats`;
}
CreateAnimal.prototype.move = function() {
  return `${this.name} moves`;
}

we take our function name CreateAnimal and access prototype using dot (because a function is an Object in javascript and prototype is the property of function) and now we are setting property ‘eat’ which value is a function, now go inside eat method (function) and we see this.name here this is referring to the instance of Object which is created by using the new keyword, and in the next function move we are doing the same thing.

var cat = new CreateAnimal('Poo', 5)
console.log(cat)

we are creating a new object cat. when we console log our object cat it is going to return an object with name and age and its values, but wait when we see inside our object there is another object __proto__ (it’s hidden property of object) and inside proto there is our method eat and move with its value (function), because prototype is creating a link between function and object.

Now we want to create a new category of only herbivores animals which will also have some special properties like they eat grass etc.

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

we want to link our function CreateHerbivores to CreateAnimal function so we can access it’s property also. we can do something like this:

CreateHerbivores.prototype.__proto__ = CreateAnimal.prototype;

here, what’s happening? we have a function CreateHerbivores which has property prototype (it’s an Object), now we are accessing of __proto__ (hidden property of every Object) and assigning to the prototype of function CreateAnimal. now, it’ll create a link between these two functions. now we can access the property of function CreateAnimal.

let’s create a new object:

var cow = new CreateHerbivores('Cow', 20);
console.log(cow);

we created a new object cow, now because we created a link between function CreateHerbivores and function CreateAnimal, we want to access the property of CreateAnimal we can do something like this.

cow.eat()

it’ll return “Cow eats”. what’s happening here it will check if there is any property called eat in Object cow it’ll find here so it will go linkage and there is eat property in CreateAnimal so it’ll return the value of the function.

Pseudoclassical Pattern

It works like same as Prototype-based class, in Pseudoclassical Pattern we create the instance of Object by using the new keyword. there is only one difference between Pseudoclassical Pattern and Prototype-based class of linkage. in Prototype-based class, we are changing the __proto__ object of function CreateHerbivores to the prototype of function CreateAnimal. and here in Pseudoclassical Pattern, we will use call()* for creating linkage. also, we can use this:

CreateHerbivores.prototype.__proto__ = Object.create(CreateAnimal.prototype);

we can also use this code for creating linkage between __proto__ of CreateHerbivores function and CreateAnimal function.

Note:- * The call() method calls a function with a given this value and arguments provided individually.
reference:- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

take above example we’ll make it in the Pseudoclassical way.

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

we are creating function CreateAnimal which is taking two parameter name and age (here this is the instance of Object). now, we want to add the new property of function CreateAnimal eat and move.

CreateAnimal.prototype.eat = function() {
  return `${this.name} eats`;
}
CreateAnimal.prototype.move = function() {
  return `${this.name} moves`;
}

it’ll set these methods eat and move inside the prototype of CreateAnimal function. now we’ll create a new function.

function CreateHerbivores(name, age) {
  CreateAnimal.call(this, name, age);
}
CreateHerbivores.prototype.__proto__ = CreateAnimal.prototype;
CreateHerbivores.prototype.eatGrass = function() {
  return `${this.name} eats grass`;
}
let rabbit = new CreateHerbivores("Rabbit", 20);
console.log(rabbit);

in this function we are calling the Parent function (CreateAnimal) with the call() method and inside CreateAnimal.call(this, name, age); this will refer to the instance of CreateAnimal. CreateHerbivores.prototype.__proto__ = CreateAnimal.prototype; in this line we’re creating the linkage. then we are making a method eatGrass in CreateHerbivores function. when we’ll run this code. we’ll see something like this:-

now we can access property from its parent function CreateAnimal, because of linkage.

3:- Class Constructor

The “class” construct allows to define prototype-based classes with a clean, nice-looking syntax.

class CreateAnimal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  eat() {
    return `${this.name} eats`;
  } 
  move() {
    return `${this.name} moves`;
  }
}

in this pattern, we use “class” keyword to define a function and in “constructor” we pass parameters, here in our function CreateAnimal we are passing two parameters name and age and in next line, we are assigning the value with this(here this refers to the instance of object which is created by using new keyword). and we are making two functions eat and move. now we’ll create a new class and will link to CreateAnimal function.

class CreateHerbivores extends CreateAnimal{
  constructor(name, age) {
     super(name, age);
  }
  eatGrass() {
      return `${this.name} eats grass`;
  } 
}

here extends will inherit the property of its parent, so CreateHerbivores will inherit the property of CreateAnimal. here The super() keyword is used in order to call the methods of the parent class and we are making a function eatGrass.

Now we’ll create a new instance of Object.

let rabbit = new CreateHerbivores("Rabbit", 20);
console.log(rabbit)

here we can see its creating a new Object and stored in variable rabbit, and inside the __proto__ of object It’s creating a linkage to its parent function CreateAnimal and inside __proto__ of CreateAnimal function we can see our eat and move function is here. now if we want to access any property from CreateAnimal function, we can do something like this.

it will go inside CreateHerbivores Object and look for move function, it’ll find it inside object then it will go inside __proto__ and look for it, if it’s not here, then it’ll go inside linkage of CreateAnimal function and it’ll return the value. what if there is no method called move, then it’ll return undefined.