What is this?

Update: This was originally part one of many articles but I decided to talk about another subject, since this is already covered in other places. Look at You Don’t Know JS.

So, this, is a JavaScript reserved keyword. That means that you can’t assign to it.

var this = 1; // throws SyntaxError

Looking at the ECMAScript 2015 Language Specification, the abstract operation ResolveThisBinding determines the binding of the keyword this, using the LexicalEnvironment of the running execution context.

Binding refers to a mapping of one thing to another, in plain English, that means that this points to different things based on context.

this changes based on context

Since ES5 you can even decide what this points to, not by assigning directly to this, since we can’t do that… but lets get back to that later.

So, what is this?

Global context

this.toString(); // [object Window]

If you write on the browser console the above code, you’ll get [object Window], so in the running execution context (in this case the global context, outside of any function), this refers to the global object, in this case Window.

Now try that in NodeJS, and you’ll get something different, since there is no Window object there.

this.toString(); // [object global]

Now we know, in the global context, outside of any function, this refers to the global object of the environment, the Browser, or whatever.

Execution contexts

So we talked about execution context, there is always, at any point in time, one execution context that is executing code. That is the running execution context, that means, if we are in the global context, this has a different binding than when we are in the function context.

Function context

Now that we are in the function context, this, gets a bit more complicated, since depending on how the function is called, the binding of this changes.

function globalThis() { 
console.log(this.toString()); // [object Window]
}

If we call that function, we’ll see that this, points to the global object.

Now look at an example using this inside a method (a function in an object).

var foo = {
objectThis: function() {
console.log(this.toString()); [object Object]
}
};

If you call foo.objectThis() you’ll see that it points to some other object, not the global object anymore, in this case the object is our foo, we can verify that in this example:

var foo = {
one: 1,
objectThis: function() {
console.log(this.one); // 1
}
};

You should see 1 if you run foo.objectThis() on the browser console.

Strict mode

I hope it was that simple, but there is also another thing to have into account. In JavaScript things can be processed using either unrestricted or strict mode syntax and semantics, in our previous examples, we used unrestricted mode (if you were running that on the browser console that is).

Function context in strict mode

So lets try this but using strict mode.

function strictModeThis() {
'use strict';
console.log(this.toString()); // TypeError
}

Ok, so now that does not work, it throws a TypeError when you call strictModeThis. In this case this is undefined and there is no toString there.

this is set to something or nothing when entering the execution context, in this case it keeps itself undefined.

Now, we can tell JavaScript what this is bind to.

strictModeThis.bind(window)() // [object Window]

So now even on strict mode we have it again with a binding to Window, isn’t that cool? well, kinda… maybe not in this case, but it can be.

You can check some code playing with the this reserved keyword on JavaScript on here: http://www.pablorosales.xyz/javascript-play/

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.