Unexpected JQuery awesomeness... But how does it work (method missing type syntax)?

Apologies for the vagueness of the title, I can't think of a succint way of summarising this question. I'm 开发者_如何学JAVAnew to Javascript and JQuery and needed to respond to a checkbox being toggled, based on its value. Searching the site revealed lots of answers, mostly in the form:

$("input[type='checkbox']").click(function() {
    if( $(this).is(':checked') ) {
        //code here
    }
})

In a flash of dynamic typing inspiration however, I tried typing this into my Javascript console:

 $("input[type='checkbox']").click(function() {
    if( this.checked ) {
        //code here
    }
})

...and to my surprise it worked! What's going on here behind the scenes? Is there a method defined called 'checked', or some kind of default property, or even a Ruby-style 'method missing' concept? Is this enabled by JQuery or is it intrinsic to Javascript?

It struck me as pretty awesome and I'd like to understand it better.

This basically boils down to the difference between this and $(this). (Read more here)

this is the DOM object for the current object where as $(this) is the jQuery wrapped version. This means you can do this.checked and is the same as calling normal Javascript.

What this does mean though is that, like @Val said you may run into cross browser issues as you are not relying on jQuery to solve these issues for you.

The reason it works is when the handler is called, its does something to the effect of:

callbackfn.call(<reference to event obj>, .. params .. )

If you go take a look at the JS reference, you'll see that the first parameter passed to .call is the context you want the function to run within. So in this case, since the object passed in is the clicked item, it will be the context.

I disagree with the other replies that this will cause you any trouble in xss browser compatibility, this is how you're supposed to do it and many many jQuery libraries rely on this.

See this stackoverflow article

$(this)[0] == this