{"id":108734,"date":"2023-09-07T07:00:00","date_gmt":"2023-09-07T14:00:00","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/oldnewthing\/?p=108734"},"modified":"2023-09-07T08:40:23","modified_gmt":"2023-09-07T15:40:23","slug":"20230907-00","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/oldnewthing\/20230907-00\/?p=108734","title":{"rendered":"A freestanding JavaScript function that uses this<\/CODE> is easily mistaken for a constructor"},"content":{"rendered":"

As a general rule in JavaScript, when you define a function with the function<\/code> keyword (not with the arrow syntax), the this<\/code> keyword is bound to the invoking object if the function was called as the result of the .<\/code> (dot) operator. Otherwise, it is bound to undefined<\/code> (in strict mode) or the global object (in non-strict mode).<\/p>\n

Being bound to undefined<\/code> or the global object is not particularly interesting. In practice, a function uses this<\/code> if it was intended to be called via the .<\/code> (dot) operator, which means in practice that it was defined either by adding it to a prototype or by using the syntactic sugar of an ES6 class declaration.<\/p>\n

The only common case where a freestanding function (not stored on a prototype) uses this<\/code> is when it is a constructor. In that case, the this<\/code> keyword is bound to the object being constructed.<\/p>\n

Visual Studio Code has a static analyzer that looks for functions that look like constructors. When it finds one, it suggests, “This constructor function may be converted to a class declaration.” I don’t know the details of this static analyzer,\u00b9 but from observation, it appears that the logic for this rule is very simple: A function declared with the function<\/code> keyword that writes to properties of this<\/code> is probably a constructor. (Because there’s rarely any reason for a non-constructor to use this<\/code>.)<\/p>\n

This rule generally works, except when it doesn’t.<\/p>\n

You can override the normal assignment of this<\/code> by using methods like call<\/code>, apply<\/code>, or bind<\/code>. The call<\/code> and apply<\/code> methods override the value of this<\/code> for a single call of that function. The bind<\/code> method returns a new function that calls the original function with the this<\/code> overridden by the value you specify at bind time.<\/p>\n

Visual Studio Code’s static analyzer doesn’t know about these weirdos.<\/p>\n

But wait, there’s more.<\/p>\n

Some callers intentionally bind this<\/code> to something strange when calling a callback function. For example, the Array iterative methods<\/a> take an optional second parameter traditionally named thisArg<\/code>. Before calling the callback function, the iterative method binds this<\/code> to the value you passed as the thisArg<\/code>, and your callback function can then use this<\/code> to refer to that object.\u00b2 Another example is HTML DOM event handlers, which bind this<\/code> to the element that generated the event.<\/p>\n

If you use either of these features, then the suggestion will misdetect your function as a constructor candidate.<\/p>\n

If you don’t want to disable the suggestion outright, it may be possible to make small adjustments to your code to avoid the misdetection.<\/p>\n

If your function is an event handler, then you can use e.currentTarget<\/code> instead of this<\/code> to access the element that generated the event. This is probably more idiomatic anyway, because this<\/code> is easily lost when you do code factoring.<\/p>\n

\/\/ original version\r\n\r\nfunction focusHandler(e) {\r\n    var item = findItemFromElement(this);\r\n    if (item.ready) {\r\n        this.className = \"ready\";\r\n    } else {\r\n        this.className = \"waiting\";\r\n    }\r\n}\r\n\r\n\/\/ refactored, bug introduced\r\n\r\nfunction focusHandler(e) {\r\n    var item = findItemFromElement(this);\r\n    updateClass(item);\r\n}\r\n\r\nfunction updateClass(item) {\r\n    if (item.ready) {\r\n        \/\/ Oops: \"this\" means something different here\r\n        this.className = \"ready\";\r\n    } else {\r\n        this.className = \"waiting\";\r\n    }\r\n}\r\n\r\n\/\/ alternate original version\r\n\r\nfunction focusHandler(e) {\r\n    var item = findItemFromElement(this);\r\n    if (item.ready) {\r\n        e.currentTarget.className = \"ready\";\r\n    } else {\r\n        e.currentTarget.className = \"waiting\";\r\n    }\r\n}\r\n\r\n\/\/ improper refactoring detected\r\n\r\nfunction focusHandler(e) {\r\n    var item = findItemFromElement(this);\r\n    updateClass(item);\r\n}\r\n\r\nfunction updateClass(item) {\r\n    if (item.ready) {\r\n        \/\/ error: \"e is not defined\"\r\n        e.currentTarget.className = \"ready\";\r\n    } else {\r\n        e.currentTarget.className = \"waiting\";\r\n    }\r\n}\r\n<\/pre>\n
The “e<\/code> is not defined” error clues you in that the code you factored out also needed e<\/code>, and you forgot to add it as a parameter.<\/p>\n
For the Array iterative methods, custom binding of this<\/code> is one of those obscure features that you show off at parties, but rarely something you use in real code. If you really do want to pass a bonus parameter to the callback function, you can bind it explicitly.<\/p>\n
\/\/ original version, false positive\r\nfunction accumulateTotal(e) {\r\n    this.total += e.value;\r\n}\r\n\r\nclass Something\r\n{\r\n    updateTotal(items) {\r\n        this.total = 0;\r\n        items.forEach(accumulateTotal, this);\r\n        return this.total;\r\n    }\r\n}\r\n\r\n\/\/ revised version, avoids false positive\r\nfunction accumulateTotal(o, e) {\r\n    o.total += e.value;\r\n}\r\n\r\nclass Something\r\n{\r\n    updateTotal(items) {\r\n        this.total = 0;\r\n        items.forEach(accumulateTotal.bind(null, this));\r\n        return this.total;\r\n    }\r\n}\r\n\r\n\/\/ revised version, avoids false positive, less obscure\r\n\r\nclass Something\r\n{\r\n    updateTotal(items) {\r\n        this.total = 0;\r\n        items.forEach(e => accumulateTotal(this, e));\r\n        return this.total;\r\n    }\r\n}\r\n<\/pre>\n
\u00b9 You can find the code that implements the “can be converted to a class constructor” suggestion  in the function canBeConvertedToClass<\/code> in suggestionDiagnostics.ts<\/code><\/a>.<\/p>\n
\u00b2 Offer not valid for functions which have already been bound to a this<\/code>, either explicitly via bind<\/code> or implicitly by virtue of being an arrow function.<\/p>\n","protected":false},"excerpt":{"rendered":"
Because that’s what constructors look like.<\/p>\n","protected":false},"author":1069,"featured_media":111744,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-108734","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-oldnewthing"],"acf":[],"blog_post_summary":"
Because that’s what constructors look like.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/108734","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/users\/1069"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/comments?post=108734"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/108734\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/media\/111744"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/media?parent=108734"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/categories?post=108734"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/tags?post=108734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}