{"id":2250,"date":"2017-01-06T01:08:37","date_gmt":"2017-01-06T06:08:37","guid":{"rendered":"http:\/\/www.ikriv.com\/blog\/?p=2250"},"modified":"2017-01-10T23:06:32","modified_gmt":"2017-01-11T04:06:32","slug":"javascript-wtf-2-the-this-keyword-part-1","status":"publish","type":"post","link":"https:\/\/ikriv.com\/blog\/?p=2250","title":{"rendered":"JavaScript WTF #2: the this keyword (part 1)"},"content":{"rendered":"

Java language specification defines “this” keyword in one sentence<\/a>. EcmaScript 6 definition<\/a> of “this” is about a page of pseudo-code spread over several paragraphs, and there is a good reason for that. <\/p>\n

JavaScript’s this<\/code> is defined by 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<\/code> 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.<\/p>\n

Undefined “this” for indirect method calls<\/h4>\n

In JavaScript this<\/code> is set to undefined<\/code> 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<\/i> whose value is a function, this<\/code> will always be undefined<\/code>, even if said function is actually a method of some object. Consider the following code:<\/p>\n

\r\n'use strict'\r\nvar obj = { \r\n    x:42, \r\n    printX() { console.log(this.x); } \/\/ method\r\n};\r\n\r\nfunction invoke(action) { action(); \/* free call *\/ }\r\n\r\nobj.printX();                 \/\/ 42\r\ninvoke(obj.printX);           \/\/ Cannot read property 'x' of undefined\r\n<\/pre>\n
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<\/code> as a parameter to the invoke()<\/code> function. In this case obj<\/code> is only used to retrieve the pointer to the printX<\/code> function, and then discarded. When printX<\/code> is called on line 7 via the action<\/code> variable, it is considered a free function call, not a method call. Therefore, its “this” pointer is set to undefined<\/code>, hence the error. <\/p>\n
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.<\/p>\n
In certain cases, it may be tricky to distinguish when the call is a method call and when it is not:<\/p>\n
\r\n'use strict';\r\nobj.printX();            \/\/ 42 - method call\r\n(obj.printX)();          \/\/ 42 - method call\r\n(false || obj).printX(); \/\/ 42 - still method call\r\n(false || obj.printX)(); \/\/ Cannot read property 'x' of undefined - free call\r\n<\/pre>\n
Dangerous behavior in default mode<\/h4>\n
If you forget to add 'use strict'<\/code> 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<\/code>. If your code happens to modify a property whose name coincides with one of the window<\/code> object’s properties, it can lead to rather spectacular results:<\/p>\n
\r\nvar obj = { \r\n    location: "right: 20px",\r\n    setLocation(side, pixels) {\r\n        this.location = side + " " + pixels + "px";\r\n    }\r\n}\r\n\r\nfunction goLeft(setter) {\r\n    setter("left", 10);\r\n}\r\n\r\ngoLeft(obj.setLocation); \/\/ oops...\r\n<\/pre>\n
When run in a browser (try it!<\/a>), this code navigates to URL “Left%2010px”, because line 4 modifies window.location<\/code> instead of obj.location<\/code>. It is highly unlikely this was the intended behavior.<\/p>\n
The exotic kludge of bind()<\/h4>\n
To get around the problem of undefined “this” for function expressions, JavaScript has a special function bind()<\/code> that returns an “exotic function object” (it’s an actual term from the specification). When invoked, this object sets this<\/code> to the value specified. <\/p>\n
\r\n'use strict'\r\nvar obj = { \r\n    x:42, \r\n    printX() { console.log(this.x); } \r\n};\r\n\r\nfunction invoke(action) { action(); }\r\ninvoke(obj.printX.bind(obj)); \/\/ 42\r\n<\/pre>\n
The trouble is, with “bind” you can set this<\/code> to any value, sometimes with unexpected results:<\/p>\n
\r\n'use strict'\r\n\r\nvar logger = {\r\n    messages: [],\r\n    log(text) {  this.messages.push(text); },\r\n    out(level, text) { this.log(level.toUpperCase() + ": " + text); },\r\n    clear() { console.log("Messages logged: " + this.messages.length); this.messages = []; }\r\n};\r\n\r\nfunction doStuff(out) {\r\n    out("debug", "this is a test");\r\n}\r\n\r\ndoStuff(logger.out.bind(logger));  \/\/ Logs to logger.messages\r\nlogger.clear();                    \/\/ Messages logged: 1\r\n\r\ndoStuff(logger.out.bind(console)); \/\/ Logs to console, bypasses logger.messages\r\nlogger.clear();                    \/\/ Messages logged: 0\r\n\r\ndoStuff(logger.out.bind(Math)); \/\/ Logs nowhere; attempts to calculate logarithm of some text\r\nlogger.clear();                 \/\/ Messages logged: 0\r\n<\/pre>\n
To be continued…
\nCodeProject<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"Layout":"","footnotes":""},"categories":[4,15],"tags":[],"class_list":["entry","author-ikriv","post-2250","post","type-post","status-publish","format-standard","category-hack","category-webdev"],"_links":{"self":[{"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2250","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2250"}],"version-history":[{"count":39,"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2250\/revisions"}],"predecessor-version":[{"id":2296,"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2250\/revisions\/2296"}],"wp:attachment":[{"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2250"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2250"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ikriv.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}