Java language specification defines “this” keyword in one sentence. EcmaScript 6 definition of “this
” is about a page of pseudo-code spread over several paragraphs, and there is a good reason for that.
JavaScript’s this
is defined by a chain of nested “execution contexts”. It may depend on both the execution path and the static location of the caller in code, and can refer to virtually anything, or nothing at all. This makes this
arguably the most confusing concept in the language. The list of gotchas related to “this
” is long and quite impressive: so long in fact that I had to divide this WTF into parts.
Undefined “this” for Indirect Method Calls
In JavaScript, this
is set to undefined
inside free function calls (in strict mode), and to the method-holding object inside method calls. It makes perfect sense, but the caveat is that if we call an expression whose value is a function, this
will always be undefined
, even if said function is actually a method of some object. Consider the following code:
'use strict'
var obj = {
x:42,
printX() { console.log(this.x); }
};
function invoke(action) { action(); }
obj.printX();
invoke(obj.printX);
The call on line 9 is a method call, it works as expected. The call on line 10 passes the result of the expression obj.printX
as a parameter to the invoke()
function. In this case, obj
is only used to retrieve the pointer to the printX
function, and then discarded. When printX
is called on line 7 via the action
variable, it is considered a free function call, not a method call. Therefore, its “this
” pointer is set to undefined
, hence the error.
This “feature” caused so much pain, that EcmaScript 6 defined a special work-around for it in the form of arrow functions, to be discussed in part 2.
In certain cases, it may be tricky to distinguish when the call is a method call and when it is not:
'use strict';
obj.printX();
(obj.printX)();
(false || obj).printX();
(false || obj.printX)();
Dangerous Behavior in Default Mode
If you forget to add 'use strict'
in the beginning of your script, it will run in default, non-strict mode. In default mode, “this” is set to “global object” for free function calls. In web browsers, global object is window
. If your code happens to modify a property whose name coincides with one of the window
object’s properties, it can lead to rather spectacular results:
var obj = {
location: "right: 20px",
setLocation(side, pixels) {
this.location = side + " " + pixels + "px";
}
}
function goLeft(setter) {
setter("left", 10);
}
goLeft(obj.setLocation);
When run in a browser (try it!), this code navigates to URL “Left%2010px
”, because line 4 modifies window.location
instead of obj.location
. It is highly unlikely this was the intended behavior.
The Exotic kludge of bind()
To get around the problem of undefined “this
” for function expressions, JavaScript has a special function bind()
that returns an “exotic function object” (it’s an actual term from the specification). When invoked, this object sets this
to the value specified.
'use strict'
var obj = {
x:42,
printX() { console.log(this.x); }
};
function invoke(action) { action(); }
invoke(obj.printX.bind(obj));
The trouble is, with “bind”, you can set this
to any value, sometimes with unexpected results:
'use strict'
var logger = {
messages: [],
log(text) { this.messages.push(text); },
out(level, text) { this.log(level.toUpperCase() + ": " + text); },
clear() { console.log("Messages logged: " + this.messages.length); this.messages = []; }
};
function doStuff(out) {
out("debug", "this is a test");
}
doStuff(logger.out.bind(logger));
logger.clear();
doStuff(logger.out.bind(console));
logger.clear();
doStuff(logger.out.bind(Math));
logger.clear();
To be continued…
CodeProject