We have all been frustrated with this in JavaScript. Let me try to simplify this for you. No pun intended ;)

The reason why many JavaScript developers struggle with this is primarily because of the dynamic nature of this and the way it changes its context.

In JavaScript, the this keyword can be used in the global as well as function contexts. Moreover, the behavior of the this keyword changes between strict and non-strict modes.

---

Global Context

In the global execution context, this refers to the global object (both in strict and non-strict modes).

Anything which is defined in the global scope can be accessed by this. What this means is that when you're writing code for the browser, this will refer to the window object.

let name = 'Chaitanya';

console.log(this.name);    // Chaitanya

console.log(window.name);    // Chaitanya

console.log(this);    // window

Above code example shows that this here refers to the window object in the browser.

---

Function Context

In a function, the this keyword will by default refer to the global object, when NOT in strict mode. In case of browsers, that is the window object.

let name = 'Chaitanya';

function myFunction () {
    let name = 'Rohan';

    console.log(this.color);    // Chaitanya

    console.log(color);    // Rohan
}

myFunction();

However, when the 'use strict' Strict Mode is on, then this will remain as undefined.

---

Object Context

When this is inside of an object, it always refers to that object.

let name = 'Chaitanya';

const someObject = {
    name : 'Rohan',
    age : 21,
    greetFunction: function () {
        console.log ( "Goodmorning " + this.name );
    }
}

console.log(someObject.greetFunction());    // "Goodmorning Rohan"

Using this with Object Methods

#### bind() Method

The bind() method creates a new function that, when called, has its this keyword set to the provided value.

What this does is, it let's us explicitly define the value of this when calling a function.

let person = {
    fName: 'Chaitanya',
    lName: 'Chhikara',
    getFullName: function() {
        let fullName = this.fName + ' ' + this.lName;
        return fullName;
    }
};

let greet = function() {
    console.log('Goodmorning, ' + this.getFullName());
};

var logGreetings = greet.bind(person);    // creates a new object and binds person object.

logGreetings();    // 'Goodmorning, Chaitanya Chhikara'

call() & apply() Method

The MDN Docs for call() say: The call() method calls a function with a given this value and arguments provided individually.

call() changes the context of this by passing the object as the first parameter. If nothing is passed then call() will point to the window's scope.

The call() allows for a function/method belonging to one object to be assigned and called for a different object. With call(), you can write a method once and then inherit it in another object, without having to rewrite the method for the new object.

Let's look at the main differences between call() and bind method:

1. call() accepts additional parameters as well.

2. call() executes the function it was called upon right away.

3. bind() makes a copy of the function it is being called on.

Now, call() and apply() works exactly the same way but only difference is that call() expects all the parameters to be passed in individually, whereas apply() expects an array of all of our parameters.

let person = {
    fName: 'Chaitanya',
    lName: 'Chhikara',
    getFullName: function() {
        let fullName = this.fName + ' ' + this.lName;
        return fullName;
    }
};

let greet = function(age, city) {
    console.log(this.getFullName() + ' is ' + age + ' years old and lives in ' + city);
};

greet.call(person, 21, 'Sonipat');    // Chaitanya Chhikara is 21 years old and lives in Sonipat
greet.apply(person, [21, 'Sonipat']);    // Chaitanya Chhikara is 21 years old and lives in Sonipat

---

Thank you for reading this. The content is sourced from MDN Docs and various other corners of the internet. I hope you liked this.