Question

我今天发现了一些代码，我很确定它不起作用。原来我错了。这适用于IE和Chrome。

<img onmouseover="why(this)" src="http://placehold.it/150x100" alt="" />
<img onmouseover="why(this)" src="http://placehold.it/100x100" alt="" />
<br>
<img id="preview" src="" alt="" />
<img name="preview2" src="" alt="" />

function why(obj) {
    preview.src = obj.src;
    preview2.src = obj.src;
}

为什么这样做？我们不应该使用document.getElementById吗？的 FIDDLE

Answer 1

它的工作原理是因为默认情况下，所有id个元素都会使用window作为属性名称转储到id对象上。有些浏览器会对name执行相同的操作。由于window对象是浏览器中的全局对象，因此这些看似独立的变量将被解析为window的属性。

依靠它并不是一件好事，因为全局命名空间非常拥挤，并且很容易影响那些。例如：

function preview() { }

现在，具有id preview的元素不再可用作全局符号，因为我已使用函数对其进行了遮蔽。或

var preview;

砰的一声，它消失了。

因此在查找元素时使用document.getElementById等。

重新评论以下内容：

当我检查窗口对象时，我找不到属性预览。然而，一旦我在函数中放置断点，为什么会突然定义window.preview。知道它是如何工作的吗？

我刚刚添加了window.preview作为监视表达式，它返回undefined，直到我点击了brekpoint。

我希望在解析这些元素时创建属性。所以它取决于你何时停止并查看window：如果你在解析器到达那些DOM元素之前查看它，那些属性将是undefined。这就是我在这个页面上看到的内容：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ScratchPad</title>
</head>
<body>
<script>
debugger;
</script>
<div id="testelement"></div>
<script>
debugger;
</script>
</body>
</html>

从第一个debugger;语句开始，window.testelement上的一个手表（也使用Chrome的devtools）显示undefined，但截至第二个debugger;语句，它显示了div元素。

默认情况下可使用名称或ID的元素

1 个答案: