JavaScript Part 4 - the “this” operator
OK, take a deep breath, hold your nose and get ready to finally understand this.
When my friends first dive into JavaScript the this operator throws people for a major curve. To really understand what it is I’m going to try my best to distill its essence into a simple explanation that while not fully encompassing the nuances of “this” use should go along way to helping you understand the resulting behaviors of using this.
From Mozilla:
The this keyword refers to the context object aka the current object.
See, that’s simple right? Well, not really. The problem presents itself when we add in JavaScripts scoping rules (hopefully in this series soon!).
OK, first this being a pointer to the context object is passed into functions implicitly. That’s right folks, it’s not sitting there waiting in the scope that it was originally created in, no, it’s actually passed through to functions auto-magically when you call a function. Consider the following code running in a browser context.
var frank = {name:"Frank"};
var betty = {name:"Betty"};
function sayMyName(){
document.write(this.toString()+"'s name is "+this.name+"<br>");
}
betty.sayMyName = frank.sayMyName = sayMyName;
All we’ve done here is introduce a few new objects, frank and betty, a globally accessible function called “sayMyName” and gave both betty and frank properties that will call that function. So, if we run this we’re going to see…
[object Window]'s name is
[object Object]'s name is Betty
[object Object]'s name is Frank
Ah, did you see what happened there? the first time we call it the current top level context in the browser is actually the Window object! It was passed to our function (because there’s always a caller) implicitly. So, when betty calls the function the betty object is the current object making the call. Therefore, we see it’s something of type Object (remember where we inherit from?) and that it responds to name with Betty. Frank is the same.
The lesson here is that this is not set when the function is defined it’s determined when the function is executed and the current contextual object is this. So, where does this mess with people’s heads? Check this example out…
Let’s run this sample and then run it again with the commented out line… well back into the code. That should bring this crazy subject clearly into light.
The important thing to remember is that this is a reference to context object. When we transfer the context to a variable in the top level (global) space we’re really adding that as a property on Window in the case of browser scripting. So, the first time we call it, name is not defined, but if you call it a second time, you’ll notice that name is updated to the variable and since window now has a name value it’s printed to the screen.
There’s a whole host of variations on this very wide topic but I believe if you understand exactly what this is referring to it can help you to quickly identify when it’s been used in an unintentional way in your JavaScript code. In fact, having written this part, I believe we could do another follow up on the quirks of this in the browser which is where most will have context to it. Events… yes… events + this can be tricky. Stay tuned for that. :)
