如果变量不存在，console.log 返回 html 元素答案

【问题标题】：console.log returns html element if variable not exists如果变量不存在，console.log 返回 html 元素
【发布时间】：2019-02-27 21:13:19
【问题描述】：

当输出一个不存在的变量时，我对console.log() 的行为完全感到困惑。

我不小心记录了一个不存在的变量bon。但是控制台没有按预期显示"undefined"，而是<div id="bon">。

搜索变量的设置位置（因为我没有设置它，它必须是全局的，因为它在函数内弹出），我剥离了所有的 javascript、css 和 html，直到什么都没有了：

<!DOCTYPE HTML>
<html> 
<head></head>
<body>
   <div id="bon">a</div>
   <script>
      console.log(bon);
   </script>
</body>
</html>

在 Firefox、Chrome、Explorer 11、Edge、Safari 中测试它们都返回：

把脚本改成
<script>
    function foo(){
        console.log(bon);
    }
    foo();
</script>
给出了相同的结果。

只有这个
   <script>
      console.log(bon);
      var bon="not bon";
      console.log(bon);
   </script>
给出了预期的输出：

未定义
不好吃

我是否遗漏了某些东西，或者这是否意味着如果控制台找不到变量本身，它只会从 DOM 中返回一个具有相同 id 的元素？

编辑

正如 Chris G 所指出的，答案在here 中找到。事实证明，现在可以使用 id 来引用全局空间中的 HTML 元素，而无需将它们分配给 var=。但也：不建议这样做。
【问题讨论】：

stackoverflow.com/questions/25325221/…

以及为什么它在这种情况下按预期工作，请参阅此处关于提升的讨论：stackoverflow.com/questions/7506844

@Chris G 糟糕的文档是正确的短语。只是浪费了 3 个小时来寻找这个变量并在谷歌上搜索答案。

标签： javascript html console global-variables

【解决方案1】：

这是因为您有一个具有相同 ID 的 Div 标签，并且“bon”尚未在页面中的任何位置启动。所以“bon”自动指向 Div Tag。

【讨论】：