为什么在e.fn.e.init或x.fn.x.init中有第二个e或x（jQuery实例名称，在chrome调试器中）？

Question

有时当你检查jQuery对象时，你会看到x.fn.x.init 。 或者，在这个页面上它缩小为e.fn.e.init ，其中x === e === jQuery ，虽然我不确定第二个e或x是什么。

考虑一下：在此页面的控制台中：

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

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

0是类似数组的jQuery对象的长度。 但是， e.fn.init如何获得e.fn.e.init ？ 什么是第二个e？

更新

我刚刚在我的页面上包含了一个未缩小的版本，它显示为jQuery.fn.jQuery.init 。 真的很困惑为什么jQuery在那里两次。

我刚刚在控制台中尝试了jQuery === jQuery.fn.jQuery ，它返回false。 实际上， jQuery.fn.jQuery是未定义的。 奇怪...

Answer 1

我没有在谷歌的控制台api参考中找到任何明确的解释，但我很想知道，这是我的结论。

这是jQuery中发生的事情的简化版本，只保留问题上下文中的有趣内容。

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 {} 

在控制台中记录对象时，Chrome会显示某种内部标识符，这取决于代码在对象中的设置方式。 它是在创建它的命名空间中对象结构的某种表示。 如果您要反转fn和prototype（即jQuery.prototype = jQuery.fn = {... ），它将打印为jQuery.fn.init而不是jQuery.fn.jQuery.init 。

奇怪的是，如果你要添加类似数组的属性（就像jQuery那样），它会在控制台中以不同的方式显示对象。 我尝试删除/添加属性，似乎添加一个带有Number类型值的length属性和一个带有Function类型值的splice属性，您将获得在控制台中显示的对象，如数组（带方括号）。

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]

所以，我认为我们不应该过多关注Chrome打印出对象的“名称”或者如何格式化它的方式......