This in javascript.

• In this article, we will take a deep dive into the javascript this and also talk about how it behaves in a different scenario.
• in many programming languages this is the reference to the object but in the case of javascript this is based on how the function is called.
• Before I share the rule with you let me give an example of how javascript this defers when I call the function differently.

1.

function checkThis(){
     console.log(this === window); // true
}

checkThis();

2.

let obj = {
  myFunction(){
    console.log(this === obj); // true
  }
}

obj.myFunction();

• Here, I am using the object shorthand syntax. if don't know what it is please do check it out this blog post

3.

let obj = {
  myFunction(){
    console.log(this === obj); // false
    console.log(this === window) // true
  }
}

consr alias = obj.myFunction;
alias();

• Here I think every example except 2nd example gave the unexpected output so let me give the technique that will make your life easier.
• The rule of thumb is if you call the function in the form of func() this will refer to the window object and if call the function in the form of obj.func() this will refer to that object.
• now let's review the above three exam. In 1st example we called checkThis function in the form of func() so this will be window object.
• In 2nd example we called the obj.myFunction(). it is the form of object.func() so this will be obj
• now 3rd example is interesting in this example we assigned obj.myFunction to the variable alias and we called that variable. now you may think alias is equal to obj.myFunction so this will be obj but remember the rule we called the alias() which the form of func(). so this will be the window object.
• let's try another example for practice

4.

let obj = {
  myFunction(){
    console.log(this === obj); // true
    function fn(){
      console.log(this === obj); // false
      console.log(this === window); // true
    }
    fn();
  }
}

obj.myFunction();

• here when we call obj.myFunction(), this will be obj which is expected but if you call fn() in obj.myFunction,this will be window object because fn() was called in func() form.

this with new keyword:

• Our rule will not apply when we call the function new func(..) way.
• when we call the function new func() it creates an object and this points to that object .

5.

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

var p1 = new person("pranshu");

console.log(p1.name); // "pranshu"

Arrow function and this :

• In ES6, javascript introduced a new type of anonymous function called arrow function.
• arrow functions do not have this binding, so they get this value from enclosing lexical context.

6.

let obj = {
  myFunction(){
    console.log(this === obj); // true
    const fn =()=>{
      console.log(this === obj); // true
      console.log(this === window); //false
    }
    fn();
  }
}

• Above code is the same as 4. but we are using the arrow function for fn instead of the traditional function.

• As seen in the 4th example normally, this in fn would be window because it was called in func() form but here fn is arrow function, and arrow do not have this. so just like any variable; the arrow function would look for this in the lexical chain and it will get the parent's this which is obj.

• Well that is a lot of information and easily forgettable, so if you don't want to remember the rules for this and you want hard bind this, you can use methods like call, apply and bind which I will cover in the next post.