What the hell is “this” in JavaScript?

The other Jackie Chan meme

this is Javascript‘s one of the most confusing concepts.

From my experience, the confusion mostly comes from the assotiation of this to classes.

In fact, classes and this work fundamentally different compared to the so-called object-oriented languages such as Java, C++, C#, etc.

Javascript-ში this განისაზღვრება რამდენიმე ფაქტორის მიხედვით: ვიძახებთ თუ არა ფუნქციაში, რა ტიპის ფუნქციაში, რა კონტექსტში (scope), რომელ გარემოში და ა.შ.

In Javascript, this is defined according to several factors: whether we call it in a function, in what type of function, in what context (scope), in which environment, etc.

Let’s consider the usual functions created with the function keyword. By remembering the following 4 rules, we will always be able to easily find the value of this:

1. If the function is called using the new keyword, then a new location is allocated in memory, the specified function is called, in which this points to this new block of memory;
2. If the function is invoked via call, apply, or bind (the latter still relies on apply), then this is determined by the corresponding argument passed to these helper functions;
3. If the function is called on an object (as a method, ie obj.foo style), then this points to this object;
4. If none of the above conditions are met, then the value of this will be a global object (in strict mode — undefined).

It should be noted that the given rules are listed hierarchically, that is, when several rules are used concurrently, priority will be given to the top rule.

For example, if the call the so-called hardbound function (derived by bind) with new, this will still target a new object.

let testObj = {
    foo: 'this is a test object',
};
function test() {
    return this;
}
console.log( new ( test.bind( testObj ) ) );

For ease of understanding, some falsely draw a parallel between arrow functions and hardbound functions.

An arrow function is not a hardbound function. That is, this is not determined by a dynamically attached at runtime, as in the case of bind, but according to the lexical scope of the arrow function.

So, this in an object indicates this object itself, in global scope — window, or in strict mode undefined, etc.

By the way, the principles of strict mode work in the body of the Class, so directly calling the function declared in the class method (according to the 4th condition) also renders this as undefined.

Consider the following case:

We will write attach handleClick function to any DOM element as an onClick event handler:

Pseudo code of the internals of a browser engine:

el.onclick = handleClick;
el.onclick(); // <===== 'this' will reference to 'el'

In this case, the value of this refers to this DOM element itself, since it appears that the browser engine called the event handler via the element.

If the browser remembered this function somewhere as a new variable and called it like that, then when accessing this, the window object would be returned to us:

var eventHandler = el.onclick;
eventHandler; <===== 'this' refers to 'window'

As a bonus, you can see an example of React JS events:

I hope my blog has clarified how this works. Then you’ll be less likely in need to overuse arrow functions to insure yourself. A JavaScript function is a powerful weapon in the hands of a knowledgeable person.

For a more in-depth look at the topic, I’d recommend Kyle Simpson’s video course Deep JavaScript Foundations, v3.

In the comments, you can write the topics that you would like to see analyzed by me.

Happy coding!