javascript - 在 JavaScript 中，没有名为 "obj"的属性的对象 "foo"如何能够使用 obj ["foo"] 给出一个值？

Question

我在《Secrets of the JavaScript Ninja》一书中读到，我们可以使用 document.all["id"] 来获取文档中的所有元素ID，如果浏览器支持的话。 (尽管据说我们应该只有一个具有特定 ID 的元素)。

但是 document.all 返回一个 HTMLAllCollection 对象，我在 Chrome 中看到它有 9 个元素，就像一个数组(9 个元素，在 jsfiddle 中设置) .所以我能理解为什么document.all[9]可以返回元素，但是为什么document.all["foo"]也可以返回呢？如果我们定义 var obj = { foo : 123 }，那么我们可以说 obj["foo"]，但是 document.all 不是具有键 foo 的对象。所以据推测，document.all["foo"] 不应该能够返回这样的元素。

注意:本题不是问document.all的使用，也不是问页面上有两个相同ID的元素。它询问为什么一个对象 obj 似乎没有键 foo 能够使用 obj["foo"] 给出一个值我不知道为什么这不是一个有效的编程问题。

示例代码:

1 个具有此类 ID 的元素:
http://jsfiddle.net/ArR5x/5/

2 个具有这样 ID 的元素:
http://jsfiddle.net/ArR5x/10/

更新:丹涛是正确的。这是因为有些属性是可枚举的，有些不是，如果支持 ECMAScript 5，我们很容易产生相同的情况:http://jsfiddle.net/Akdp9/12/这是一个关于 JavaScript 的有效问题，真正的答案是它归因于属性的可枚举特性。

Answer 1

我想我明白你为什么感到困惑。让我解释几件事以消除任何混淆。其中一些您可能已经知道，但为了安全起见，我将涵盖所有内容。

首先，类数组对象仍然可以像任何其他对象一样具有属性。即使是普通的 Array 也是这样。

var arr = [1, 2, 3];
arr.foo = "bar";
arr["foo"]; // => "bar"

因此，在解析 DOM 之后，浏览器使用与页面上每个 ID 对应的属性填充 document.all 似乎是完全合理的，即使 HTMLAllCollection 是数组-喜欢。

其次，一个对象的属性不一定生而平等。您可能已经尝试过此操作并注意到缺少任何“foo”属性:

Object.keys(document.all)
// => ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "length"]

但是，“foo”实际上是document.all 的一个属性。您可以很容易地验证这一点:

document.all.foo;
// => [<div id=​"foo">​hello​</div>​, <div id=​"foo">​world​</div>​]

document.all.hasOwnProperty("foo") // => true

这里的问题是它不是可枚举 属性。这意味着它不会出现在 for/in 循环中，这也解释了为什么当你所有 Object.keys.

您可以使用 the propertyIsEnumerable method 确认这一点:

document.all.propertyIsEnumerable("foo"); // => false

所以说到底，这并不是什么神秘的事情。可以将任意属性分配给 document.all 对象，就像它们可以分配给数组一样。这里就是这种情况；这些属性只是不可枚举的。