What is THIS in Javascript ?

The (this) in javascript is neither a reference to the function itself ,nor is it a reference to the function's lexical scope ( A lexical scope in JavaScript means that a variable defined outside a function can be accessible inside another function defined after the variable declaration. But the opposite is not true; the variables defined inside a function will not be accessible outside that function).

This is actually a binding that is made when a function is invoked ,and is what it references is determined entirely
by the call-site where the function is called (Not where the function is declared).

function foo()
{
console.log(this.a);
}
var a=2; 

In above function the default binding for this applies to the function call and so points this at the global object.

Variable declared in the global scope as var are synonymous with global object properties of the same name

function foo()
{
"use strict";
 console.log(this.a);
}
var a=2; 
foo(); //Type Error this is undefined 

In strict mode the global object is not eligible for the default binding ,so the this is instead set to undefined.

Implicit binding

function foo()
{
console.log(this.a);
}

var obj={
a:2,
foo:foo
}

In the above function ,foo is actually the property of the object so this gets implicitly binded with the object

Implicitly lost

function foo()
{
console.log(this.a)
}

var obj={
a:2,
foo:foo
}
var bar=obj.foo; //function reference alias

var a="oops ,global";

bar() ;// oops, global

As the call site of the function is what actually determines what will this
be pointing to ,so at the call site a is "oops ,global" so that's what actually gets printed on the console.

Using callbacks

function foo()
{
console.log(this.a);
}

function doFoo(fn)

 {
fn()//-->call site
}

var obj={
a:2,
foo:foo
}
var a="oops global";

doFoo(obj.foo); // oops global

The callback is another function passed as an argument to some function ,so in callback the value of this will refer to the site where that callback gets called ie the parent function on which the function (callback ) is passed as an argument.

Explicit binding

function foo()
{
console.log(this.a);
}

var obj={
  a:2
}

foo.call(obj) //2 --> giving explicit binding as we are directly stating what the this to be 

Function.prototype.call() method calls a function with a given this value and arguments provided individually.

This for arrow functions ,fat arrow functions

function foo()
{
return (a)=>{
// this here is lexically inherited from foo()
console.log(this.a);
};

}

var obj1={
  a:2
}

var obj2={
  a:3
}

var bar=foo.call(obj1);

bar.call(obj2);// 2 not 3 

The arrow function created in foo() lexically captures whatever foo()s this is at its call time .Since foo() was
this bound to obj1,bar(a reference to the returned arrow function will also be this bound to obj1)

Reference -You Don't Know JS

Thanks For Reading .