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

Question

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

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

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

创建名称与元素 ID 相匹配的变量是错误的(或不良做法)还是 Internet Explorer 的另一个实例在起作用？

Answer 1

自动创建全局变量被认为是不好的做法，因为查看某些代码很难判断它是故意的还是您忘记在某处声明变量。像这样自动创建全局变量 doesn’t work in ES5 strict mode并且可能会在未来的 ECMAScript 版本中逐步淘汰。

在浏览器中JavaScript的全局作用域其实是window。当您引用 document 时，您会得到 window.document。在浏览器中创建全局变量的最佳做法是将其添加到 window(Node.js 中的 global)。这是 an example from 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

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

这是 JavaScript 中的全局变量可能很危险的另一个原因 — 您的其中一个 ID 可能匹配只读的 window 属性(现在或将来的某些浏览器)。

在顶层(不在函数内部)，var 声明全局变量。在顶层声明 var document = 'foo' 不会引发错误，但 document 仍将是 Document，而不是 “富”。

顺便说一句:新式浏览器(支持 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");
   })();