变量存储着一个带有id的元素，它存储在哪里？

Question

这个问题（具有ID的元素可访问）指出，如果一个元素有一个id，则可以根据该id基于变量名称访问它。这让我感到好奇，因为在使用Visual Studio 2010进行开发时，我曾看到过这个变量。出于好奇，我进行了一些测试，结果发现document.getElementById()比使用变量名要快。所以，我开始尝试查找窗口中的变量，想着必须在window["idName"]中，在调试、console.log(window)中都找不到变量实际存储的位置。

当一个元素在html中定义为<div id="foo">时，它在JavaScript中使用变量foo (我不建议使用它，这是不好的实践)。那么这个变量存在哪里？

- Travis J

---

请不要将访问元素作为全局变量的惯例。这是一个丑陋的IE发明，也是非标准的。由于没有标准来定义这一点，标识符的确切位置取决于实现。 - I Hate Lazy

@user1689607 - 我同意这是一种不好的做法（甚至在问题和链接中都有提到不要使用它）。 - Travis J

Answer 1

这是非标准行为。它存储在哪里（如果存储）取决于实现。

---

在Linux上使用Firefox 15，我需要深入2个原型对象才能找到实际的对象。我在这个StackOverflow页面上运行了这段代码，并得到了一个true结果。

Object.getPrototypeOf(Object.getPrototypeOf(window)).hasOwnProperty("hlogo");

在Linux上的Chrome中，它只有一层深度。

Object.getPrototypeOf(window).hasOwnProperty("hlogo");

---

我很惊讶在Firefox中看到了这个，但由于Chrome跟随了微软的模式，我想Firefox也必须跟随这样做。

---

如果您不知道原型链有多深，可以运行一个循环，并将不同的对象添加到数组中，或者在循环中直接使用这些对象。

---

var protos = [],
    obj = window;

while (Object.getPrototypeOf(obj) !== null) {
    obj = Object.getPrototypeOf(obj);
    protos.push(obj);
}

alert("The object had " + protos.length + " prototype objects");

- I Hate Lazy

---

在Chrome中，这是“false”，但Object.getPrototypeOf(window).hasOwnProperty("hlogo")是“true”。 - Matt Ball

@MattBall：是的，我刚刚测试了一下。我更新了我的答案。谢谢。 - I Hate Lazy

@user1689607 - 非常好，谢谢您展示了一种可重复查看此变量的方法。我使用Firefox进行了测试，并成功得到了结果“两个原型对象深度”。您认为您能否进一步解释为什么需要两个原型对象深度以及外部的Object.getPrototypeOf在这里的含义是什么？ - Travis J

@TravisJ：Object.getPrototypeOf 方法是一种检索对象原型对象的方法。原型链可能不止一个对象，所以基本上 Firefox 代码的意思是“给我 window 对象的原型对象的原型对象”。换句话说，内部的获取 window 的原型，外部的获取 window 原型的原型。 - I Hate Lazy

@TravisJ：我将更新一个循环，将原型链中的每个原型对象添加到一个数组中。索引0最接近原始对象。 - I Hate Lazy

@user1689607 - 感谢您提供额外的解释，我很感激。我理解原型，但还没有完全掌握它们。 - Travis J