javascript - 为什么我可以使用数组索引运算符从 jQuery 对象访问 HTMLElement？

Question

正如我所测试的，$('foo') 是 jQuery 的实例，而不是 Array 的实例。而且据我所知，javascript 没有运算符重载。

那么如果 $('foo')[0] 不是一个，如何返回相应的 HTMLElement 数组的实例？

我尝试查看 jQuery 的源代码，但现在对我来说有点太多了。

感谢您的见解。

Answer 1

因为您可以对 JavaScript 中的任何对象使用方括号表示法，而不仅仅是数组。事实上，普通数组aren't really arrays at all在 JavaScript 中，它们只是具有特定原型(prototype)和对一类属性名称(“数组索引”)和特殊 length 属性进行特殊处理的对象。

括号表示法可用于通过字符串名称访问任何对象属性¹(不管你相信与否，[0] 会转换为 ["0"] 理论上，访问数组时)。

示例:

var obj = {foo: "bar", 0: "zero"};
console.log(obj[0]);     // zero
console.log(obj["0"]);   // zero
console.log(obj.foo);    // bar
console.log(obj["foo"]); // bar
var f = "f" + "o" + "o";
console.log(obj[f]);     // bar

上面的对象有它自己的两个属性。他们的名字是“0”和“foo”；两个名称都是字符串(即使我在初始化程序中将 0 写为数字文字；它会被强制转换为字符串)。

jQuery 维护其“数组条目”属性，以确保您可以使用括号表示法来访问它们。它还维护一个 length 属性。

如果今天从头开始编写 jQuery，它可能会扩展 Array。但是当编写 jQuery 时，您无法扩展Array。 (只有 ES2015(“ES6 的”)class 功能才成为可能。)

<小时/>

¹ 没有字符串名称的属性除外； ES2015 引入了属性的概念，其名称是符号而不是字符串。在此之前，所有对象属性名称都是字符串(甚至是数组索引)。