为什么在e.fn.e.init或x.fn.x.init中有第二个e或x（jQuery实例名称，在chrome调试器中）？ [英] Why is there a second e or x in e.fn.e.init or x.fn.x.init (jQuery instance name, in chrome debugger)?

问题描述

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

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是数组的长度jQuery对象。但是， e.fn.init 如何进入 e.fn.e.init ？第二个e是什么？

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?

更新

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

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.

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

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

推荐答案

我在Google的控制台api参考中没有找到任何明确的解释，但我很好奇理解，这是我的结论。

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.

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

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

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

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

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]

所以，我认为我们不应该太注意Chrome打印出一个对象的名称或它如何格式化它......

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

这篇关于为什么在e.fn.e.init或x.fn.x.init中有第二个e或x（jQuery实例名称，在chrome调试器中）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！