console.log 在 Chrome 和 IE 中抛出错误

Question

在 Stoyan Stefanov 的优秀著作 JavaScript Patterns 中，他给出了以下示例作为一次性回调：

document.addEventListener("click", console.log, false);

在 Chrome 中抛出 Uncaught TypeError: Illegal invocation 在 Firefox 中抛出 TypeError: 'log' called on an object that does not implement interface Console. 在 Safari 中抛出通用 TypeError: Type error。我不确定为什么。有什么想法吗？

Answer 1

console.log() 是一个函数！所以你可以这样使用;

document.addEventListener("click", function(){
    console.log("test log");
}, false);

Answer 2

想想 this 是什么总是有帮助的。

您调用 console.log、this 的方式未设置（除非您处于严格模式，否则默认为 window）。但是，该函数期望 this 为 console，因此给出了 "illegal invocation" 和 "called on an object that does not implement interface Console" - 你实际上是在无缘无故地调用它（或 Window）

似乎代码旨在 console.log 事件数据，在这种情况下，您应该明确地这样做：

document.addEventListener("click", function(e) {console.log(e);}, false);

请注意，由于它被调用 "normally"，this 将成为浏览器预期的 console，并按预期运行。

不过，我建议将其更改为 console.dir(e)，以便您可以实际探索对象数据，因为我认为 [object PointerEvent] 不是很有用。

Answer 3

这是因为 console.log 是本地方法，您不能在不同的上下文中调用它。当您将它作为回调传递时，您基本上将它分配给了不同的上下文。如果您执行以下操作，也会发生同样的情况：

var foo = console.log;
foo(1, 2, 3);

这是一个reference SO answer。

Answer 4

我发现 O'Reilly 书籍通常有 "errata" 在线页面，果然有我的答案（第 66 页）。

document.addEventListener("click", console.log.bind(console), false);

http://www.oreilly.com/catalog/errataunconfirmed.csp?isbn=9780596806767

Answer 5

console 实际上是一个对象，方法 log() 需要作用域来访问这个对象，例如

document.addEventListener("click", console.log.bind(console, "test"), false);

console.log 在 Chrome 和 IE 中抛出错误

console.log throws an error in Chrome and IE

javascript

firefox

webkit

google-chrome