JavaScript Fundamentals: What is “this”?

“this” parameter is one of the most common confusing subjects in JavaScript, despite the fact that it’s so easy to comprehend when we just approach it the right way.

You can think of “this” as just a function parameter that gets assigned to a specific object when the function is invoked, and that object is the one that the function is looked up upon.

To best explain this definition I am gonna go into several examples:

// Just an example Object 
var firstObject = {};

// Define a new function 
var displayName = function() {
	console.log(this);
}

// Assign the function as a property to the firstObject 
firstObject.method = displayName;

// Invoking the method 
firstObject.method();

The first thing we need to do is to check where in our code the function has been invoked, and ask ourselves the following question:

upon which object the function has been looked up?

In our example, the object is firstObject, so in this case, “this” is bound to that object, the output of our program:

Let’s changes the example a little bit, instead of assigning the function to an object property let’s invoke it directly:

var displayName = function() {
	console.log(this);
}

displayName();

Again, upon which object the function has been looked up?

In our code, we can’t see any object, we say that the function has been invoked globally, in this case, “this” is bound to the global object which is the window object in the browser environment:

Now, I am gonna give you a tricky example, let’s get back to the first program and try to invoke our function in a different way:

// Just an example Object 
var firstObject = {};

// Define a new function 
var displayName = function() {
	console.log(this);
}

// Assign the function as a property to the firstObject 
firstObject.method = displayName;

// Invoking the method with setTimeout
setTimeout(firstObject.method, 2000); 

Now we are invoking our function as a call back, what do you think the output would be?

Perhaps the answer that pops up immediately is firstObject, is that right?

let’s see.

upon which object the function has been looked up?

It’s not clear where the function is invoked in our code here because of the setTimeout function, we need to know how setTimeout function works under the hood, this is basically what happens:

var setTimeout = function(firstObject.method, 2000) {
  wait(2000); // Somehow wait for 2 seconds 
  
  var newFunctionObject = firstObject.method; // New function object 
  
  newFunctionObject();
}

As you can see, setTimeout is gonna define a new function object based on the function passed as a parameter, we can see now where the function is being invoked.

There’s no object in which the function is looked up upon, this is the same case as the second example, so “this” is gonna bind to the global object

Manually Bind “this”

You might get into some scenarios where you want to bind “this” to another object of your choice manually, the way we can do that is by using binding methods.

The first function in our list is call, call is used to bind “this” upon invocation:

// Just an example Object with a method property
var firstObject = {
  method: function() {
	console.log(this);
  }
};

// Define a second object 
var secondObject = {
   first_name: "Doe", 
   last_name: "John"
};

We want to invoke the function: method of the firstObject and binding “this” with the second object, this will give us access to the first_name and last_name properties in the secondObject, here’s is how we can do it:

// Just an example Object with a method property
var firstObject = {
  method: function() {
	console.log(this);
    console.log(this.first_name + " " + this.last_name )
  }
};

// Define a second object 
var secondObject = {
   first_name: "Doe", 
   last_name: "John"
};

firstObject.method.call(secondObject);

The output:

bind()

bind() is used to create a new function where “this” is bound to the object we want, in the same example above, here’s is how we can use it.

// Just an example Object with a method property
var firstObject = {
  method: function() {
	console.log(this);
    console.log(this.first_name + " " + this.last_name )
  }
};

// Define a Second Object 
var secondObject = {
   first_name: "Doe", 
   last_name: "John"
};

var new_method = firstObject.method.bind(secondObject);

new_method();
// output
/* > {first_name:"Doe", last_name:"John"}
   > Doe John */

I hope that was useful for you, if you have any questions, please leave them in the comments below, if you liked the tutorial don’t forget to share it with your friends, I truly appreciate it 🙂