Five rules to understand `this` in JavaScript.

One of the most confusing concepts in javascript is the usage of the keyword this. In most classical OOP like Java programming languages this is simply an instance of the class you are working on. However, in JavaScript, this could be many things.

Here are simple five rules that always help me know what this I am working with. In all these situations, I have to understand my context very well to determine what this is. This is because the value this is determined at runtime usually.

Before we delve into the rules, there is one important concept you also have to understand. And that is the difference between strict mode and nonstrict mode. To give you a simple definition strict mode is a feature that makes JavaScript operate in a more serious way with regards to syntax. For example, errors that were passed silently will throw exceptions.

Now, we got that out of the way, let’s jump into the rules.

Rule #1: this is a brand new object if new keyword is used when calling a function.

If a

Rule #2: this inside a function is simply the object that is passed as an argument as long as the function is called on bind, apply or call

Just like strict mode ES5 introduced bind function to set the value of this regardless of the context. What this means is, this inside a function called using bind, apply and/or call is simply the object passed as an argument.

var company = {
 name: 'abc'
}
var name = 'xyz'

function print() {
  console.log(this.name)
}
print.apply(company)
the value of this when used with call, apply and bind

Note: In the image above, the last function call bind returns the function object. That means we call call it by using print.bind(company).call()

Rule #3: this is the object that a function is a property of.

This third rule is the simple one. If you call a function as a property on a javascript object, then inside that function the value of this is the object. Here is an example:-

var company = {
 name: 'abc',
 print: function() {
   console.log(this.name)
  }
}
company.print();
A function as part of object property will always give the object when this is called.

Rule #4: this is the global context when not in the above 3 contexts.

If a function is called without the above conditions, then this is the global object. And in a browser the global object is window. However, if a strict mode is applied it will be undefined.

function print() {
  console.log(this.name);
}
print();

In the above snippet, the print function is called without a specific context. Hence, it will return window when executed in the browser.

Rule #5: this is simply the surrounding context when we work with arrow funcitons.

Finally, if there is an arrow function, then the this init will refer to the enclosing lexical context. That means, in a global code, it will set to the global object and in a class code, it will set to the class object.

var company = {
 name: 'abc'
}
var test = (() => company);
console.log(test() === company); // true

Summing Up

In conclusion,

Your subscription could not be saved. Please try again.
Your subscription has been successful.

Learn Modern JS, CSS, & PHP

Subscribe to learn modern PHP in the most simple way.