JavaScript Masters: What Is This?

If you are learning JavaScript you will undoubtedly come across JavaScript Masters repeatedly in your journey. At first like much of JavaScript, the usage of this keyword can be a little confusing.

When, why and what is this?

This keyword was introduced in the initial definition ECMA standard and has carried through the versions into now. It was introduced to evaluate the execution context.

What is the execution context? That depends on another directive within ECMA 5 which opts-in to the Use Strict mode. If you opt-in to the Use Strict mode by including the ‘use strict’ syntax then the execution context of this will be set to, and return, whatever value this held at execution. This means that if you didn’t set this to a value, or object, then it will return the primitive value undefined. This is shown in the snippet below where this will return undefined.

'use strict';

function thisIsLegit() {
  return this;
}

If you didn’t opt in to Use Strict mode, then this inside a function will possess a value depending on how the function is called.

In the snippet below thisIsLegit.call(myObj) will return ‘John’ because at execution this is set to myObj. This is accomplished by using the call keyword which will call a function with a this value. In our case, that value was myObj. If we were to make the function call thisIsLegit.call(), leaving the value null, or undefined, then the call keyword would tell the function in non-strict mode to pass in the global object. Another option would be to use the apply method, which provides the ability to pass a value to this as the first parameter, followed by a second optional parameter array of values. The apply method could be performed like this thisIsLegit.apply(myObj, []);.

var myObj = {name: 'John'};


function thisIsLegit(arg) {
  return this.name;
}

thisIsLegit.call(myObj);

I stated above that this will possess a value depending on how it was called. That is because, as a DOM event handler, this will be set to the calling element. Consider this jQuery snippet below:

$(document).ready(function () {
  $('#element').change(function() {
    console.log($(this).val());
  });
});

In the snippet above, this was called inside a DOM event handler, therefore this is set to the calling element ‘#element’ and as shown would return whatever value was held by the element.

Since I am mentioning jQuery though, I feel I should also point out that jQuery provides a constructor that accepts two arguments for overriding the this keyword, shown below. This is cool in that it lets us redirect the context of this using jQuery.

jQuery("#otherElement", this);

The last part I will cover is object methods. I said earlier that in non-strict mode, this will return the global object, well when this is accessed inside an object, it will return the object of the method that was called on. I just remember that this always defaults to the object who immediately acts as its parent.

Conclusion

In my opinion, there are really two distinct choices to start. That choice is to utilize Strict mode or not, I would recommend that you do. Using Strict mode will ensure that your values are less likely to be set to values you did not intend i.e. to the window object in older browsers that don’t support Strict mode. Understanding how the this keyword works is going to make life that much better in the world of JavaScript.

A Web Developer by trade, find me on Github A motorcycle enthusiast at heart. Most days I'd rather be in the woods anywhere.