为什么$（this）和this与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):

Answer 1

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.

Answer 2

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.