我可以使用ID作为变量名吗？

Question

我发现设置一个与元素id同名的变量很方便，例如：

randomDiv = document.getElementById("randomDiv");
  randomDiv.onclick = function(){ /* Whatever; */ }
  randomDiv.property = "value";

这适用于Chrome和Firefox，但不适用于IE8; 给出错误Object不支持此属性或方法 。

创建一个名称与元素ID匹配错误（或不良做法）的变量，或者这是Internet Explorer的另一个实例吗？

Answer 1

自动生成全局变量被认为是不好的做法，因为它很难分辨，查看某些代码，是否有意或者您忘记在某处声明变量。 像这样自动创建全局变量在ES5严格模式下不起作用，并且可以在ECMAScript的未来版本中逐步淘汰。

在浏览器中， JavaScript的全局范围实际上是window 。 当你引用document你得到window.document 。 在浏览器中创建一个全局变量，最好的做法是将其添加到window （ global在Node.js的）。 这是jQuery的一个例子 ：

window.jQuery = window.$ = jQuery;

window上的某些属性（因此某些全局变量）是只读的，您无法覆盖它们。 window.document是一个（在Chrome中测试，这是所有特定于浏览器的，可能会更改）：

window.document; // → Document
window.document = 'foo'; // → "foo" // It worked!
window.document; // → Document // Hmm, no it didn’t

事实证明，大多数浏览器为文档中的每个id在window （因此全局变量）上创建属性。 许多浏览器不会将它们设置为只读，您可以使用自己的浏览器覆盖它们，但Internet Explorer会这样做。

这是JavaScript中的全局变量可能存在危险的另一个原因 - 您的一个ID可能与只读window属性（今天或将来某个浏览器）相匹配。

在顶层（不在函数内）， var声明全局变量。 在顶层说明var document = 'foo'不会抛出错误，但document仍然是Document ，而不是"foo" 。

另外：新的浏览器（支持ES5）允许您使用Object.defineProperty创建自己的只读全局变量：

Object.defineProperty(window, 'foo', { value: 'bar', writable: false });
foo = 'baz';
foo; // → "bar"

---

我有三个选择。

1. 继续使用元素的全局变量，但如果它们已经存在则保持不变（在window明确创建它们，这样代码在ES5中清晰明了）：

    if ( ! window.randomDiv) { window.randomDiv = document.getElementById('randomDiv'); } 

2. 在window上创建一个对象，用作应用程序自己的命名空间，不会干扰其他库或浏览器。 这很常见，被认为是非常好的做法，特别是如果需要跨JavaScript文件访问它：

    // Early in your code… window.Fantabulum = {}; // Later on… Fantabulum.randomDiv = document.getElementById("randomDiv"); 

3. 避免制作全局变量。 确保你的应用程序的代码在一个函数内（它应该已经是你的其他变量不是全局的，并且没有相同的限制！），并为你的元素声明变量：

    (function(){ var randomDiv = document.getElementById("randomDiv"); })(); 

Answer 2

IE的一个怪癖是创建与元素ID和名称同名的全局变量。 您可以创建一个具有相同名称的全局，但有一些怪癖。

这是一个非常糟糕的主意。 如果您不喜欢键入document.getElementById ，只需为它创建一个小包装函数，例如：

funciton get(id) {
  return typeof id == 'string'? document.getElementById(id) : id;
}

Answer 3

randomDiv不是已定义/已知的“全局范围变量”。

声明全局变量