js basics

this in js is one of the confusing topics that every js developer comes across in their dev journey from being to beginner to pro. If you want to become a pro js dev , then you need to have a strong grasp of this topic.

So let's start !

so let's start with who is this in js ?

this technically refers to object that the function belongs to.
The value of this depends on how the function is being called , something known as runtime binding in js

In simple terms we can say that this refers to the owner of function call. The point to be noted is here that :

this refers to the owner of function call, Not the function itself.
The same function can have different owners depending on the different scenarios.

The value of this is based on these 4 rules in js.

1. Default Binding

In the Default binding, this generally refers to global object

//1. default bindings
  function myFunc() {
    console.log("this in default bindings:", this);
    //here this refers to the global object that is 'Window'
  }

  myFunc();

2. Implicit Binding

Implicit Binding(also known as method invocation) concept in js is applied when we invoke a function in an object using the dot(.) notation. this in such sitautaion will refer to the object using which that function was invoked.

//2. Implicit binding
  function showData() {
    console.log("this in Implicit binding:", this);
    console.log("show my data:", this.name, this.job);
  }

  const obj = {
    name: "karishma",
    job: "react js dev",
    showData: showData
  };

  obj.showData();

  //this in Implicit binding: 
  //obj -> {name: "karishma", job: "react js dev", showData: ƒ showData()}

now there are various scenarios of implicit binding.

2.1 Nested function

In a nested function, that is you can see here we have a function inside the method of an object. So here in this case the value of this depends on the function invocation type and not on the outer function's context.

//2.1.Nested function
  const obj1 = {
    name: "karishma gajria agarwal",
    job: "react js dev",
    outerFunc: function(){
      function innerFunc(){
        console.log("this in Nested function:",this);
      }
      innerFunc();
      //here innerFunc()is called using default binding, so here this refers to the window object. 
    }
  };

  obj1.outerFunc();
  //here outerFunc() is called using implicit binding

2.2 Method that is separated from an object

As you can see the code below

//2.2.Method that is separated from an object.
  function showMyData(){
    console.log("this in Method that is separated from an object refers to:", this)

  }

  const obj2 = {
      name: "karishma gajria agarwal",
      job: "react js dev",
      showMyData: showMyData
    };

    const newFunc = obj2.showMyData;
    //here, we are copying an object method to a new variable, here we are creating a refernce to the function
    newFunc();
    //In this scenario , this refers to window object, as newFunc() directly refers to function - showMyData

3.Explicit Binding

In Explicit binding( also known as indirect invocation).Here we can force a function to use a certain object as its this. Explicit binding can be acheived using :

call()
apply()

bind()

//3.Explicit binding
function showUserData(yoe,country) {
  console.log("this in Explicit binding refers to:", this); 
  console.log(`${this.name} is ${this.profile} having ${yoe} years of experience, lives in ${country}.`);
}

const user1 = {
  name: "karishma",
  profile: "react js dev"
};

const user2 = {
  name: "Ema",
  profile: "HR"
};

const user3 = {
  name: "John",
  profile: "Backend dev"
};

showUserData.call(user1, '1.5', 'India');
//  this in Explicit binding refers to: 
//  {name: "karishma", profile: "react js dev"}
//  karishma is react js dev having 1.5 years of experience, lives in India. 

showUserData.apply(user2, ['2', 'Singapore']);
// this in Explicit binding refers to: 
// {name: "Ema", profile: "HR"}
// Ema is HR having 2 years of experience, lives in Singapore. 

//using bind(), we can create a new function with fixed this
const user3Info = showUserData.bind(user3) ;
user3Info("4","China");
// this in Explicit binding refers to: 
// {name: "John", profile: "Backend dev"}
// John is Backend dev having 4 years of experience, lives in China.

3.New Binding

New binding in Js, also known as Constructor invocation is applied when we create an object using Function constructors.

//4.New Bindings
function myOuterFunction(){
  this.name = "Ema";
  this.myInnerFunction = function(){
    console.log("this in New binding refers to:",this);
  };
}

  const myObj = new myOuterFunction();
  myObj.myInnerFunction();

//   this in New binding refers to: 
// myOuterFunction {name: "Ema", myInnerFunction: ƒ (), constructor: Object}

So , In conclusion , we can say that

The value of this in js, depends on type of function invocation .
In default binding, this, refers to Window object
In Implicit binding, this, refers to object on the Left hand side of dot(.) notation.
In Explicit binding, this, refers to object passed as 1st paramter in call(), apply() and bind() method.
In New binding, this, refers to Left hand side object in the function call.

Code sandbox link : https://codesandbox.io/s/this-keyword-forked-rocts7

Karishma Gajria's Blog