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

Question

正如我测试的那样,$('foo')是一个实例jQuery,而不是实例Array.和AFAIK,javascript没有运算符重载.

那么如何才能$('foo')[0]返回相应的HTMLElementif $('foo')不是实例Array？

我试着看看jQuery的源代码,但现在对我来说有点太多了.

感谢您的任何见解.

Answer 1

因为您可以在JavaScript中使用括号表示法与任何对象,而不仅仅是数组.事实上,普通数组在JavaScript 中根本不是数组,它们只是具有特定原型的对象,并且对一类属性名称("数组索引")和特殊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引入了属性的概念,其名称是Symbols而不是字符串.在此之前,所有对象属性名称都是字符串(甚至是数组索引).