html5 规范文档中指出: 如果一个元素符合下面两条规则中的任一条, 则 window 对象中必须要有与之对应的一个属性, 属性值就是这个对象.
让我们看一个例子. 假定存在一个页面, 该页面包含了一个 ID 属性为 "foo" 的 div 元素:
这样一来, 上面的的 div 元素就可以通过 window.foo(和其他的 window 属性一样), 或者全局变量 foo 来访问到. 比如, 在 Chrome 控制台中, 你可以这样做:
- <div id="foo"></div>
Firefox
- > "foo" in window
- true
- > foo
- <div id="foo"></div>
- > "foo" in window
- false
- > typeof foo // 这个全局变量到底有木有?
- object
- //错误控制台输出了下面的警告.//Element referenced by ID/NAME in the global scope.
- //Use W3C standard document.getElementById() instead.
- > foo
- [object HTMLDivElement]
- //错误控制台输出了下面的警告.//Element referenced by ID/NAME in the global scope.
- //Use W3C standard document.getElementById() instead.> "foo" in window true
- > "foo" in window
- false
- > typeof foo // 这个全局变量到底有木有?
- object
- //错误控制台输出了下面的警告.//Element referenced by ID/NAME in the global scope.
- //Use W3C standard document.getElementById() instead.
> foo
[object HTMLDivElement]
// 错误控制台输出了下面的警告.//Element referenced by ID/NAME in the global scope.
//Use W3C standard document.getElementById() instead.> "foo" in window true
这到底是怎么一回事? 初始化时, window 并没有属性 foo. 但在第一次访问这个属性的时候 (通过 window.foo 属性直接访问或者通过全局变量 foo 来访问都可以), 它会被自动建立.
译者注: 我在 Firefox14,15,18 中都没有发现警告, 不过在 Firefox12 试验时, 的确有警告.
[注意: 例子中的代码只能在网页中通过 script 标签运行才能见效, 不能通过终端运行. 这是因为终端在处理全局对象时, 使用了不同的方式.]
译者注: 我在 Firebug 中尝试例子中的代码, 并没发现有什么差别.
一旦你尝试读取 foo 的值, 虽然会正常返回那个 div 元素, 但同时错误控制台会有警告, 告诉你不应该那么做. 很显然, 这样的警告是正确的: 在终端调试的时候, 你可以使用这个特性, 但在实际的代码中, 不应该使用.
Cody Lindley 写了一个 jsPerf 测试来比较通过全局变量访问 foo 和通过 window.foo 来访问 foo 的性能差别. 有趣的是, 只有在 Firefox 中访问 window.foo 更快点.
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0629/281595.html