Demystifying 'This' in Javascript

Adewumi Emmanuel Femi — Tue, 01 Feb 2022 16:53:36 +0000

The first question a beginner in programming would ask is, "what is 'this'? Well, I don't mean the kind you have in mind. In this context I'm talking about the 'this' that accompanies every block of code or function. So where does 'this' come from?

Every code block always has a context called 'this'. Most beginners always wondered where the this comes from (I was most beginners, most beginners was me).

When a code block is created, in this example, we will be using a function. All functions are prototype of the Object class, i.e. they inherit from the Object class. First we have to look at function from the angle of being an object. Let's take a look at what happens when you create a function.

function getAllUser(){
   let this = {} //(1)
}

When a function is declared we have an Object initialized or created called 'this' as seen in (1) above. All methods and variables are created inside the 'this' object.

function createUser(firstName, lastName){
    let firstName = firstName;
    let lastName = lastName;
}
createUser.prototype = {
      fullName: function(){
          Alert(`Full name is ${this.firstName} ${this.lastName})
      }
}
function createUser(firstName, lastName){
    let this = {
      firstName: firstName,
      lastName : lastName
    }
}

Conclusion

The object class is parent to many other classes and it forms the basis of many classes we use often. The concept of 'this' is understandable because function itself is a prototype of Object class.

Classes Under the Hood

Adewumi Emmanuel Femi — Fri, 31 Dec 2021 23:00:32 +0000

Ever heard the phrase, "in software engineering, everything is an object"? Well, we are going to delve into three major things: How classes in javascript work under the hood, what classes are built on and also the fact that a class is a function basically.

In order to understand how classes work under the hood, we need to touch on two concept in javascript: prototypal inheritance and constructor function.

Constructor Function

When you create a class, you are basically creating a function. This type of function is called a constructor function and it is always initialized with the keyword 'new.' It is a convention in Javascript to start a constructor function with a capital letter.

The (*) represents the creation of the constructor function, (**) represents how to create an object from the constructor function. The line (***) creates an object from the construction function using an inbuilt property 'constructor' (I don't think Ostriches are blue thou). Whenever you create a class you are creating a constructor function.

Prototypal Inheritance

let Animal = { 
  breath: true,
  walk() {
    Alert("All Animal's walk");
  },
};

let Bird = {
  __proto__: Animal, (*) // Bird becomes a prototype of Animal
  fly: true,
};

alert(Bird.walk()) (**) // All Animal's walk

All objects have a property called [[prototype]] this is referenced or called when __proto__ is set on the Bird object to Animal. The line (*) signifies I am inheriting or I am a prototype of Animal; therefore I have access to everything inside the Animal object. The __proto__ can go as deep as possible but an object may not inherit from two at a time i.e you can only inherit from one other object.

How does the above tie into classes and how classes work? Well, when you create a class you create a constructor function and when your class has a constructor you are using the constructor property under the hood.

To sum it all up

Class User{
   constructor(name, age){
      this.name = name;
      this.age = age;
   }
}
const user = new User("David" "2")

function User(name, age){ // This is equivalent to creating a class User
   this.name = name;
   this.age = age;
}
const user = new User()
const user1 = new user.constructor("David" "2") // This is what the User class constructor above calls under the hood