this keyword in javascript

Introduction :-

One of the most confusing topics in javascript
so to access the object, a method can use this keyword.
unlike other programming language javascript, this keyword behaves differently, It can be used in any function, even if it’s not a method of an object.

this keyword

use of this keyword

const user = {
  name: 'hero',
  age: 21,
  data() {
    console.log('user name', this.name)
    console.log("user age", this.age)
  }
}
user.data()
// user name hero
// user age 21

looks easy right

In javascript, the value of this does not refer to the function which is used or its scope
it refers to value by the invocation context of function and where it is called.

Binding is important to understand 'this' keyword

• Default Binding:
• Implicite binding
• Explicit binding
• New operator method

Default binding

const myFunction = function() {
   console.log(this);
}

myFunction();    // Window

as we call function() in the window context it will refer to the window object

var myFunction = function() {
   console.log(this.a);
}
var a = 200
myFunction();    // 200

above function, this refers to the global context and return 200 its only work if we use var because it hosts in global context.

Implicite binding

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

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

obj.foo();  // 2 

as you see obj.foo() will refer to object obj and return 2

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

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

var fun = obj.foo; 
fun() //undefined

if we assign obj.foo to var then it will refer to the function itself

Explicit binding

if we want to call a function using any particular object there we use explicit binding.

we can use call, bind, and apply

const obj = {
 name:'hero',
  age:21
}

function foo (){
console.log('user name', this.name)
    console.log("user age", this.age)
}

foo.call(obj)
// user name hero
// user age 21

call use to so explicitly say to a function what object it should use for this

apply method works same as call the only difference between call and apply is in apply function arguments passed as an array.
function.call(obj, arg1, arg2)
function.apply(obj, [arg1], [arg2])

bind use create a new function that will act as an original function but with this predefined

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

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

var fun = foo.bind(obj); 
fun() //2

New operator method

The new operator lets us create an instance of a user-defined object type or one of the built-in object types that have a constructor function.

const newObj = new Car('toyota','nissan','honda')

• Creates a blank, plain JavaScript object.
• A new empty object is created and refer by this keyword.
• Properties and methods are added to the object referenced by this.

function Car(carOne, carTwo, carThree) {
  this.carOne = carOne;
  this.carTwo = carTwo;
  this.carThree = carThree;
}

const newObj = new Car('toyota','nissan','honda')

console.log(newObj.carTwo);  //nissan

new operator has the highest priority than explicit binding and implicit binding. The lowest priority has default binding.

Arrow function for 🥶this

const arrowFun = ()=> console.log('this will not bind')

yes 😂
because the arrow function does not have there own binding. arrow function can't use this argument methods

const obj = {
  name: 'harshit'
}
const fun = () => {
  console.log(this.name)
}

fun.call(obj) // <empty string>

arrow function don't have access to new.target
Arrow functions aren't suitable for call, apply and bind methods, which generally rely on establishing a scope.

thank you for reading