Understanding the this keyword in JS

Hello reader, welcome to this blog, in this we would we discussing the concept of this that is used in JS.

What is this ?

In JS, this simply refers to the object that is currently executing the function. this depends on the environment where JS is present. In a browser this is the windows object.

this in node JS environment is different depending on the scope where it is used.

this is a reference to the object that calls the function.

this inside objects

Objects don't have their own this, it depends on how a function is called, not where the object is written.

const obj = {
  name: "Saurav",
  greet() {
    console.log(this.name);
  },
  greetWithoutThis() {
    console.log(name)
  }
};

obj.greet();
obj.greetWithoutThis();

You can see in the above code there are two ways name inside the object is getting accessed.

obj.greet() will work just fine and print Saurav. However obj.greetWiithoutThis() would throw a ReferenceError. We would understand about it in detail in the next section.

this inside functions

This is a very interesting section and explains why obj.greetWithoutThis() didn’t work.

Functions create scopes.

When you try to access a variable inside a function, JavaScript first checks the function’s own scope. If the variable is not found, it looks in the outer scope, and then the global scope. If the variable is not found anywhere in the scope chain, only then a ReferenceError is thrown.

Objects are not part of this scope chain.

So, to access properties of an object inside a function, we use this, which refers to the object based on how the function is called.

How calling context changes this

this is decided how a function is called, not where it is written.

Plain function call (default binding)

function show() {
  console.log(this);
}

show(); //Window or undefined

this = global object (browser) or undefined (strict). The output could either be window object or undefined, depending on the environment, if you want to understand more about what output would be shown check out this blog.

Method Calling (implicit binding)

const obj = {
  name: "Saurav",
  show() {
    console.log(this.name);
  }
};

obj.show(); //Saurav

In this case this = obj , so inside show when you console this.name you are actually doing obj.name.

Extracted Function (context lost)

const obj = {
  name: "Saurav",
  show() {
    console.log(this.name);
  }
};
const fn = obj.show;
fn();

In this case you have broken the link and made fn() as a normal function instead of using it as a method.

Explicit Binding (call, apply, bind)

const obj = {
  name: "Saurav",
  show() {
    console.log(this.name);
  }
};
const fn = obj.show.bind(obj);
fn(); //Saurav

Call, bind, apply are often used to attach the context that get broken because of the extracted function. You can learn more about them in this blog.

Constructor Call

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

const p = new Person("Saurav");

In this case this is the newly created object.

Arrow Function (ignore calling context)

const obj = {
  name: "Saurav",
  show: () => {
    console.log(this.name);
  }
};

obj.show(); //undefined

In this case this comes from the outer scope and not from the obj.

Arrow functions also ignore call, apply, bind. If you need dynamic this, don’t use arrow functions. Use normal functions and control this via call-site or binding.

Conclusion

Understanding this could help you a lot in being a good programmer in JS, the idea is not to memorise patterns, but understand the concept behind this. You need to understand that this is not related to scope. Scope determines how variables are resolved, while this is determined by how a function is called and refers to the execution context. Arrow functions are an exception, as they capture this from their lexical scope.