4

Sometimes when you're inspecting a jQuery object, you'll see x.fn.x.init. Or, on this page its minified as e.fn.e.init, where x === e === jQuery, although I'm not sure what the second e or x is.

Consider this: in the console on this page:

$
>> function (a,b){return new e.fn.init(a,b,h)}

[$()]
>> [e.fn.e.init[0]]

0 is the length of the array-like jQuery object. But, how does e.fn.init get to e.fn.e.init? What's the second e?

Update

I just included an un-minified version on my page, and its showing up as jQuery.fn.jQuery.init. Really confused why jQuery is in there twice.

I just tried jQuery === jQuery.fn.jQuery in the console, and it returns false. In fact, jQuery.fn.jQuery is undefined. Strange...

Michael Lewis
  • 4,252
  • 6
  • 28
  • 39

1 Answers1

1

I have'nt found any clear explanation on that in Google's console api reference, but I was curious to understand and here are my conclusions.

This is a simplified version of what's happening in jQuery, keeping only what's interesting in the question's context.

var jQuery = function() {
    return new jQuery.fn.init();
};

jQuery.fn = jQuery.prototype = {
    init: function() {
        return this;
    }
};
var j = jQuery();
console.log(j);
>> jQuery.fn.jQuery.init {}

When logging an object in the console, Chrome displays some kind of internal identifier which depends on how the object was set in the code. It is some kind of representation of the object's structure in the namespace where it was created. If you were to invert fn and prototype (i.e jQuery.prototype = jQuery.fn = {... ) it would print out as jQuery.fn.init instead of jQuery.fn.jQuery.init.

Strangely, if you were to add array-like properties (just like jQuery does), it would display the object differently in the console. I have tried removing/adding properties, and it seems that adding a length property with a Number type value and a splice property with a Function type value, you get the object displayed in the console like an array (with square brackets).

var jQuery = function() {
    return new jQuery.fn.init();
};

jQuery.fn = jQuery.prototype = {
    init: function() {
        return this;
    },
    length: 0,
    splice: function(){}
};
jQuery.fn.init.prototype = jQuery.fn;

var j = jQuery();
console.log(j);
>> [init: function, splice: function]

So, I think we should not pay much attention to the way Chrome prints out an object's "name" or how it formats it...

Martin Vézina
  • 319
  • 2
  • 8