Why $(this) and this show up as the same thing with console.log?

Question

I understand that into a jQuery callback $(this) passes a reference to a DOM object (or array of objects) to jquery and constructs a jquery object and I also understand that this is the reference to the DOM object (or array of objects) the jQuery selector selected, but I don't understand why those two different objects have the same jQuery methods in the Chrome inspector:

// Print the object methods (found here on stackoverflow)
function getMethods(obj) {
    var result = [];
    for (var id in obj) {
      try {
        if (typeof(obj[id]) == "function") {
          result.push(id + ": " + obj[id].toString());
        }
      } catch (err) {
        result.push(id + ": inaccessible");
      }
    }
    return result;
  }

...

// into a jquery callback
console.log(getMethods($(this))); // This returns an array of jQuery methods
console.log(getMethods(this)); // This does the same - why??

Edit: this is what I see in Google Chrome (latest release at the time of writing this):

enter image description here

@Albert can you show a working example, and name which methods you see in both cases. — Rory McCrossan, Mar 26 '15 at 14:01
nothing throws in those calls, so pointless `try..catch` block — Ryan, Mar 26 '15 at 14:04
Edited the question with a link to the chrome's inspector. I can't post images due to reputation by the way. — Albert, Mar 26 '15 at 14:05
Chrome seems to use something very close to jQuery... Try opening the console in a blank page like "about:blank" and see what "$" returns in the console... I do not know exactly what it is, just that it's there... — Salketer, Mar 26 '15 at 14:11

mohamedrias · Answer 1 · 2015-03-26T14:16:16.887

0

Now both doesn't have same methods:

Please check their length,

console.log(getMethods($(this)).length); // This returns an array of jQuery methods

returns you 174

While

console.log(getMethods(this).length);

returns you 109

Update

As you are calling both of them inside the $.fn.addRootNode and here this refers to the jQuery object.

As we know when you pass $(jquerywrappedobject) it will return that object as such as it's already a jquery object.

That's the reason why you're seeing same values in both.

edited Mar 26 '15 at 14:16

answered Mar 26 '15 at 14:06

mohamedrias

18,326
2
38
47

1

That is true, thanks. By the way I'd also be interested in knowing why there are jquery methods in the DOM reference (or array of DOM references) – Albert Mar 26 '15 at 14:07

score 0 · Accepted Answer · answered Mar 26 '15 at 14:13

You are calling those 2 lines inside of $.fn.addRootNode. $.fn is a reference to jQuery.prototype. So, what you did was add a function called addRootNode to jQuery objects. You basically created a "jQuery plugin".

Inside that function, this is a jQuery object because you are calling a function that's part of the jQuery prototype. You're doing $('#yourElement').addRootNode() somewhere, so this is is the jQuery object addRootNode was called on.

Doing $(this) does nothing since this is already a jQuery object. jQuery knows this and just returns the same object.

Why $(this) and this show up as the same thing with console.log?

2 Answers2