Javascripts命令:window.alert vs console.log

Question

我是javascript的新手,请原谅我的天真.我发现了一种似乎不一致的行为,至少对我而言.在进行一些测试时,我输入以下两行代码:

console.log(document.getElementById("errorMessage"));
window.alert(document.getElementById("errorMessage"));

我完全希望两者都给我相同的结果,但不,我没有.

console.log(document.getElementById("errorMessage"));

给我:

    <span id="errorMessage">

而

window.alert(document.getElementById("errorMessage"));

给了我警报窗口:

    [Object HTMLSpanElement]

任何人都可以帮助我理解为什么我得到不同的结果,即使我通过了完全相同的论点？

补充说明:这不是一个重复的问题,因为上面引用的问题哪个更好,而不是两者之间有什么区别.

Answer 1

console.log允许执行“浏览器开发人员工具希望执行的任何操作”。因此，console.log仅适用于实时调试，并且在 Firefox、Chrome 和 IE 中的行为有所不同（在 IE 中，它将显示与警报相同的文本）。

现在，它alert可以一致地工作，因为它将输入视为字符串并[[ToString]]根据需要应用转换。在用于转换的 DOM 元素上toString()，这并不是很令人兴奋，最终会出现字符串“[Object blahblah]”。（我相信确切的文本可能会因浏览器而异。）

通过手动将元素强制为字符串，很容易获得相同的行为：console.log

console.log("" + document.getElementById("errorMessage"))

然而，反之则不然，虽然可以通过在警报中显示“外部 HTML”console.log来模拟它，但在某些开发人员工具中，行为结果只是（美妙的）魔法。

这种魔力使得 Chrome 能够对提供给 console.log 的对象（包括 DOM 元素）进行“实时检查”。然而，如上所述，IE 的 console.log（至少到 IE10）也会强制将值转换为字符串。这并不那么神奇，而且很像警报。

虽然警报可用于“快速调试”，但我建议使用debugger、console.log、 以及适当的开发人员工具提供的断点/异常支持，因为它们更适合手头的任务。