$('h1') 如何在 jQuery 中作为数组记录到 Web 控制台？

Posted 2023-02-26

【中文标题】$(\'h1\') 如何在 jQuery 中作为数组记录到 Web 控制台？

【英文标题】：How is $('h1') logging to the web console as an array in jQuery?$('h1') 如何在 jQuery 中作为数组记录到 Web 控制台？

【发布时间】：2012-06-01 13:09:06

【问题描述】：

如果你在浏览器中执行console.log($('some selector'))，它会返回一个看起来像数组的东西（第一行）：

但请注意，它不是instanceof Array，而实际上是the jQuery object。

当您执行console.dir($('h1')) 时，它显示它实际上是 jQuery 对象。

问题是，他们如何使它看起来像 Web 控制台中的数组？我注意到在 jQuery 源代码 here 他们添加了对一些 Array 和 Object 方法的引用，here 他们将 toArray（以及 slice 和其他）添加到 jQuery 对象。 Web 控制台是否以某种方式检查这些方法，如果找到一个（toArray、indexOf、slice 等），它会将其打印为数组？我想从任何自定义对象中获得这种行为，例如Ember.ArrayProxy。目前，当您记录 Ember.ArrayProxy 时，它会显示 > Object 或其他任何内容，但最好将其显示为数组。

有什么想法吗？

【问题讨论】：

相关：***.com/questions/6599071/….

【参考方案1】：

您使用原型使您的对象继承Array，如下所示：

function SomeType() 
    this.push(16);


SomeType.prototype = [];
SomeType.prototype.constructor = SomeType; // Make sure there are no unexpected results

console.log(new SomeType()); // Displays in console as [16]

当然，所有 jQuery 对象都是 jQuery 函数/构造函数的实例，所以 jQuery 就是这样做的。作为奖励，由于继承，您可以从 Array 获得所有方法，以及随之而来的索引！

【讨论】：

不错！好吧，我刚刚做了一些其他测试，如果你这样做：var x = length: 0, splice: Array.prototype.splice，那么x 将看起来像一个数组。奇怪......它特别需要它看起来像的那两个属性。

@LancePollard：有趣，似乎也可以跨浏览器工作！虽然继承方式确实有new SomeType() instanceof Array是true的优势。

P.S.你14岁，铁杆！ :) 改变世界。

@Derek：我刚刚使用 php 读取了 Referer 标头并从中取出 ?add 参数，同时跟踪会话。不要告诉任何人:)

@minitech 我不认为 jQuery 真的继承自数组原型，它实现了length、splice 可能还有其他方法。