The magic of this, call(), bind() and apply() in javascript

Introduction to this keyword

This keyword is the reference to the object that is in current context of execution. Its value is determined dynamically. Those different values of this are discussed below.

this in global context

In this case, there is this in two different environment. First is in web browser and then in node js that gives different output.

a. this in web browser

In web browser, it will return an window object.

b. this in node js

It will return an empty object.

this in objects

In this case, this refers to the object that owns the method.

this in regular function with non-strict mode

In this case, this will refer to the global object.

In web bowser, it will be window object but in node js, it will be global object as shown in image below.

this in regular function with strict mode

In this case, this can not refers to the global object. Here, this is undefined.

this in constructor function with new

In this case, this refers to the instance of new object created.

this in arrow function

In this case, arrow functions do not have their own this binding, they inherit the this value from their immediately surrounding (lexical) scope at the time they are defined.

Second Example -

this in event handler

In this case, this usually refers to the DOM element that triggered the event.

this in detached method

In javascript, a "detached method" can refer to a function that is removed from its original context, causing the this keyword to no longer to refeerence that object.

In non-strict mode: this falls back to the global object, so this.name is usually undefined.
In strict mode: this is undefined, so accessing this.name can throw an error.

`call()`

The call() method invokes a function immediately. It takes the desired this value as the first argument, followed by any additional arguments provided individually.

Syntax :- func.call(thisArg, arg1, arg2, arg3);

`bind()`

The bind() method returns a new function with the this context permanently set to the provided value.

Syntax :- let bindFunc = func.bind(thisArg, arg1, arg2, arg3);

`apply()`

The apply() method is nearly identical to call() method. It also invokes the function immediately. The only difference is that the argument in apply() method is passed as a single array where as the argument in call() method is passed as individually.

Syntax - func.apply(thisArg, [argsArray])

Difference between call, bind and apply

The difference between call, bind and apply are mentioned below.

Features	Call	Bind	Apply
Calling	call a function with specific this.	Call a function with specific this.	Create a new function with fixed this.
Arguments	passed individually.	passed individually.	passed in the form of array.
Run	It run immediately.	It do not run immediately.	It run immediately.
Return	It returns result of function.	It always return new function.	It returns result of function.