Question

In Google Closure Compiler I get the warning

WARNING – dangerous use of the global this object

Here is an example. The error line and offset refers to the beginning of the word this

function aToggle() {
  if(shown)
    toggle.show()
  else
    toggle.hide()
  $(this).text(shown ? 'Click to hide' : 'Click to show')
  shown = !shown
}
link.onclick = aToggle

I would just change it to an anonymous method, but I am re-using aToggle elsewhere in the file, so it needs to be named.

I could mark aToggle as /**@constructor*/ — but it is not a constructor. Is there another annotation I can use to eliminate this warning, or am I stuck between marking it as constructor or having a bunch of useless warnings show up?

Answer 1

Edit: I’ve been reading Closure: The Definitive Guide, and I just realized that you can simply add the /** @this {Element} */ annotation before your event handler to make Closure Compiler stop complaining.

See the Closure Compiler warning reference. The Closure Compiler gives this warning when you use this within a function that is not either annotated /** @constructor */ or is within the prototype of a class. The compiler assumes that you’ll never use this when a function is called in the context of another object (which is what event callbacks do).

Some places that you might have to change to make Closure Compiler stop complaining with this warning:

• Don’t use link.onclick = ... directly, because you have to mess with this and e || window.event. Instead, use jQuery to wrap the event handler, since jQuery’s event object has e.currentTarget.
• If you’re using this within a jQuery.each, replace this with the second parameter of your function. E.g., jQuery.each([1, 2, 3], function(i, val) { ... val ... };.