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

Question

Apologies for the vagueness of the title, I can't think of a succint way of summarising this question. I'm new 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.

although that might work, im not so sure it would cross browser. so stick to the long code and dont take any shortcuts :) otherwise u will be pulling ur hair out trying to figure out why it aint working — Val, Feb 15 '11 at 10:13
this is similar to doing "this.id" where you actually bypass creating an object — benhowdle89, Feb 15 '11 at 10:14

score 2 · Answer 1 · answered Feb 15 '11 at 10:22

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.

score 1 · Answer 2 · answered Jan 27 '12 at 17:45

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.

score -1 · Answer 3 · edited May 23 '17 at 12:04

-1

See this stackoverflow article

$(this)[0] == this

edited May 23 '17 at 12:04

Community

1
1

answered Feb 15 '11 at 11:12

EdmundYeung99

2,461
4
27
43

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

3 Answers3