The Secret Life of This keyword

As a programmer and a JavaScript developer, the most confusing topic for me is this and defining the context that this is referred to. After a lot of reading and going through the documentation many times I finally able to understand the concept behind this keyword.

I want to save your precious time by explaining it briefly with core concepts, so let’s get started.

Introduction

According to MDN in JavaScript the value of this not refer to the function in which it is used or it’s scope but is determined mostly by the invocation context of function and where it is called.

Ughh….alot of technical jargon? let’s break it down in simple words.

The thiskeyword points to a particular object, Now which is that object that totally depends on the function which includes the this keyword and calls it.

In the global execution context (outside of any function), this refers to the global object.

First, let’s look at a global scope example

// In JS window object is global
console.log(this === window); //true
a = 45;
cosole.log(window.a); // 45

Inside a function, the value of this depends on how the function is called.

function f1(){
    return this;
}
// In a browser
f1() === window; //true

The above code is not in strict mode, this will default to the global object which is window in a browser.

Call() and apply()

In JavaScript, a function can be invoked using ( ) operator as well as call() and apply() methods, no matter which method we use, the function is executed in the same way.

The main purpose of call() and apply() is to set the context of this inside a function irrespective of its scope.

Let’s see an example

var myVar = 100;

function WhoIsThis() {

    alert(this.myVar);
}

var obj1 = { myVar : 200 , whoIsThis: WhoIsThis };

var obj2 = { myVar : 300 , whoIsThis: WhoIsThis };

WhoIsThis(); // 'this' will point to window object

WhoIsThis.call(obj1); // 'this' will point to obj1
WhoIsThis.apply(obj2); // 'this' will point to obj2

Class Context

this behavior is similar in classes in function, but there are some differences and caveats.

According to MDN, Within a class constructor, this is a regular object. All non-static methods within the classes are added to the prototype of this.

Arrow Functions

In arrow function this is set to the global object.

var Gobject = this;
var fun = ( () => this);
console.log(fun() === Gobject); // true

In the arrow function, no matter what this retains the value of the enclosing lexical context.

Getter or setter

Same as function, this with getter and setter is bound to the object from which the property is being set or gotten, let’s see an example.

function sum() {
  return this.a + this.b + this.c;
}

var o = {
  a: 1,
  b: 2,
  c: 3,
  get average() {
    return (this.a + this.b + this.c) / 3;
  }
};

Object.defineProperty(o, 'sum', {
    get: sum, enumerable: true, configurable: true});

console.log(o.average, o.sum); // 2, 6

These are some of the basic use cases, but not limited to this article, for further in-depth knowledge of this keyword please see references.

The main takeaways are, the context is always an instance to an object, as when our JavaScript program begins, the browser creates: var window = new;

window() object behind the scenes, is the very root context created.

Conclusion

Concepts like this takes time for many people to get used to and that is totally fine because, in most practical world use cases, this level of understanding and use is not required.

As you begin writing more and more JavaScript, you will get the hook of this keyword very fast.

Thanks for reading and I hope this helps you out to get the basic understanding of this keyword.

[1]https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

[2]https://jstutorial.medium.com/the-magic-of-this-keyword-2ed897d6033b