What the heck is “this”?

Before we get started with this let us understand how scoping works in Javascript. There a number of ways people use the word scope and the simplest of them is lexical scope. It describes the region in your source code, where you can refer to the variable name without getting access errors. In simple programs with no function and blocks at all, there is exactly one scope which is called global scope. After defining a variable in a lexical scope, you may make reference to that variable from anywhere in that lexical scope.

Before ES6, Javascript only had function scopes with var keyword but with the introduction of let and const in ES6, Javascript supports block scoping as well. However, Variables declared wit var do not have block scope.

var x = 1;
{
  var x = 2;
}
console.log(x); // logs 2
let y= 1;
{
  let y= 2;
}
console.log(y); // logs 1
const c = 1;
{
  const c = 2;
}
console.log(c); // logs 1 and does not throw SyntaxError...

this? What’s that?

this is an identifer that gets value bound to it, much like a variable. But instead of identifying the values explicitly in your code, this gets bound to the correct object automatically. In most cases, the value of this is determined by how a function is called.

This in Global context:

When this is called outside of any function, in a global context, this defaults to the Window object in the browser.

console.log(this) // Window

This in object creation:

When you create a new instance of an object with the new keyword, this refers to the instance.

function Person (name) {   
this.name = name; 
}  
let adam = new Person('adam') 
console.log(greg) // this.name = 'adam'
let thomas = new Person('thomas')  
console.log(thomas) // this.name = 'thomas'

This in object method:

Here this refers to the object you will be calling the function with.

let obj = {   
checkObj () {     
console.log(this)   
  } 
}  
obj.checkObj() // obj

This in a simple function:

On browsers, this is always set to Window in a simple function. The same is true even if you call a simple function in an object method.

function checkObj () {   
console.log(this) 
}  
const ob = {   
checkThis () {     
    function checkObj(){ 
    console.log(this);
  }; 
    checkObj();
  } 
}  
checkObj() // Window
ob.checkThis() // Window

It can be confsuing sometimes as the context of this changes for simple function inside an object method.

This in event listeners:

this is set to the element that fired the event in an event listener.

let button = document.querySelector('button');  button.addEventListener('click', function() {  
 console.log(this) // button 
});

This in arrow functions:

this in an arrow function is always the same as this around it (in its immediate scope). So, if you use arrow functions within an object method, the this context stays as the object, not Window.

const abc = {   
checkThis () { console.log('here',this);    
   check =() => (console.log(this));
   check();
 } 
}  
abc.checkThis(); // abc

Changing this with bind:

ECMAScript 5 introduced Function.prototype.bind. Calling bindcreates a new function with the same body and scope as f, but where this occurs in the original function, in the new function it is permanently bound to the first argument of bind, regardless of how the function is being used.

function sayThis () {   
console.log(this); 
} 
const boundFunc = sayThis.bind({check:''}) 
boundFunc(); // check:''

bind works only once. If you try to change the binding of a function it won’t happen.

Conclusion:

this is a crucial keyword in JavaScript. It appears in many JavaScript frameworks, so you have to know what it does. In this article, I tried to cover most of the scenarios that you will come across while encountering this .