The value of this in JavaScript

Reading time ~2 minutes

What object references this in JavaScript is always a tricky question. Let me try to explain you how the value of this is determined.

The value of this is based on the context in which the function is being called. Let's consider this piece of code:

<script>
 
var hello = 'Hello from the outer space';
var aObject = {
	hello : 'Hello from the earth'
}
 
var sayHello = function(){
	console.log(this.hello);
}
 
aObject.sayHello = sayHello;
 
aObject.sayHello();
sayHello();
 
</script>

The output of this code is this:

[caption id="attachment_244" align="alignnone" width="1024"]First example First example[/caption]

As you can see, in the first line we are calling the sayHello function inside the object, so this is referencing aObject. In the second line, we are calling the sayHello function of the global scope.

Nested functions

Things get a little more complicated when you have nested functions. Imagine this piece of code:

<script>
 
var aObject = {
	aFunction: function(){
		console.log(this);
		var anotherFunction = function(){
			console.log(this);
			var yetAnotherFunction = function(){
				console.log(this);
			}();
		}();
	}
}
 
aObject.aFunction();
 
</script>

The output of this code is:

[caption id="attachment_245" align="alignnone" width="1024"]Nested functions Nested functions[/caption]

As you can see, only the first call this refers to the object. On the other calls, this refers to the head object. This will be fixed soon, but in the meantime you should workaround this problem storing this in a variable:

<script>
 
var aObject = {
	aFunction: function(){
		console.log(this);
		var that = this;
		var anotherFunction = function(){
			console.log(that);
			var yetAnotherFunction = function(){
				console.log(that);
			}();
		}();
	}
}
 
aObject.aFunction();
 
</script>

 

Constructors

When you invoke a function with the new keyword this refers to the instance.

Imagine this piece of code:

<script>
 
var Elf = function(name){
	this.name = name;
}
 
var aegnor = new Elf('Aegnor');
 
console.log(agnor.name);
 
</script>

The output will be:

Be careful because if you don't use the new keyword, this will refer to the context in which Country is invoked. So, if we remove the keyword new of the previous example, the output will be undefined.

The same logic applies if you add a function to the object prototype. If you new an instance of this function and you call the added function which uses this, this will refer to the instance.

Using call or apply

You can overwrite the value of this using apply() or call(). When using these functions you specify which object will be used as this. Let's see an example:

 

<script>
 
var monica = {};

var setLocation = function(location){
    this.location = location;
}

setLocation.apply(monica, ['London']);

console.log(monica);
 
</script>

The output is:

[caption id="attachment_248" align="alignnone" width="725"]Using apply Using apply[/caption]

 

As you can see, determine the value of this is a little bit tricky but not so complicated.

Calling a Step Function

Until now we've seen how to create a Step Function, but we've always called them using the serverless framework. In this article we're go...… Continue reading