WARNING - dangerous use of the global this object

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 ... };.

Answer 2

I don't know JQuery very well but I think you can use something like:

function aToggle(event) {
  if(shown) {
    toggle.show();
  } else {
    toggle.hide();
  }
  $(event.target).text(shown ? 'Click to hide' : 'Click to show');
  shown = !shown;
}

$(link).bind('click', aToggle);

where you retrieve the clicked target from a cross browser generic event object.

EDIT: as a word of advice, use { } with your if else and use semicolons, don't rely on your browser to do it for you.

To make the best use of the closure tools it is advised to use the closure library in combination with the compiler (though not necessary)

Answer 3

First, you are probably doing it wrong. :-)

@Jan had the right idea. But you should probably go with the following:

(function(){
    var toggle = $("#toggle");
    $("#yourLinksID, .orClassName").click(function(e) {
        var shown = toggle.toggle().is(":visible");
        $(this).html(shown ? "Click to hide" : "Click to show");
        e.preventDefault();
    });
}());

and when compiling:

Use the following jQuery externals file that tells Closure Compiler what does what in jQuery: http://code.google.com/p/closure-compiler/source/browse/trunk/contrib/externs/jquery-1.4.3.externs.js

If you just want the warning message to go away replace this with link.