window.console.log和console.log之间有什么区别

Just went through an interview. The first question asked me was what is console.log(). I answered with so confidence. Again,

刚接受采访。第一个问题问我是什么是console.log()。我非常自信地回答。再次,

The second question was, what is the difference between window.console.log() and console.log(). I was speechless. Tried searching in Google and Stack Overflow. I didn't find such helpful post to understand the difference between them.

第二个问题是,window.console.log()和console.log()之间有什么区别。我无言以对。尝试在Google和Stack Overflow中搜索。我没有找到这样有用的帖子来理解它们之间的区别。

Any thoughts is greatly appreciated.

非常感谢任何想法。

3 个解决方案

#1

In a normal browser context, there is no difference. console is a global variable, and all globals are properties of the window object.

在普通的浏览器环境中,没有区别。 console是一个全局变量,所有全局变量都是window对象的属性。

console.log(console.log==window.console.log) // true

There are some caveats, such as when not running in the browser, or if the console variable has been reassigned. T.J. Crowder explains it nicely.

有一些注意事项,例如未在浏览器中运行,或者是否已重新分配控制台变量。 T.J.克劳德很好地解释了这一点。

#2

If you mean in the default browser JavaScript environment, there is effectively none provided window and console haven't been shadowed or reassigned.

如果您的意思是在默认的浏览器JavaScript环境中,实际上没有提供窗口和控制台没有被镜像或重新分配。

In the default browser JavaScript environment, window is a global that refers to the global object, which is also the window object. The global object holds most globals as properties (it used to be all, but in ES2015 that changed; globals created by let, const, or class are not properties of the global object). But that's not true in most non-browser environments (NodeJS, for instance, uses global instead of window), or even in some non-default browser environments (such as a web worker's environment, which doesn't have window as they can't access the window). So in environments where window isn't defined, window.console.log will fail where console.log wouldn't (provided the environment provides a global console).

在默认浏览器JavaScript环境中,window是一个全局对象,它引用全局对象,也就是窗口对象。全局对象将大多数全局变量保存为属性(它曾经是全部,但在ES2015中已更改;由let,const或类创建的全局变量不是全局对象的属性)。但在大多数非浏览器环境中都不是这样(例如,NodeJS使用全局而不是窗口),甚至在某些非默认浏览器环境中(例如Web工作者的环境,它没有窗口,因为它们可以'访问窗口)。因此,在未定义窗口的环境中,window.console.log将失败,而console.log则不会(如果环境提供全局控制台)。

To understand the difference, let's work each of them through:

为了理解这些差异,让我们通过以下方式工作:

console.log(...) means:

1. The JavaScript engine has to search for the a binding for the identifier console starting with the current execution context, then the next one, then the next, until it finds it at global scope.

JavaScript引擎必须从当前执行上下文开始搜索标识符控制台的绑定,然后搜索下一个绑定,然后搜索下一个绑定,直到它在全局范围内找到它。

2. Then it looks up the log property on the resulting object.

然后它在生成的对象上查找log属性。

3. Then it calls it

然后它调用它

window.console.log(...) means:

1. The JavaScript engine has to search for the a binding for the identifier window starting with the current execution context, then the next one, then the next, until it finds it at global scope.

JavaScript引擎必须从当前执行上下文开始搜索标识符窗口的绑定,然后搜索下一个绑定,然后搜索下一个绑定,直到它在全局范围内找到它。

2. Then it looks up the console property on the resulting object.

然后它在结果对象上查找控制台属性。

3. Then it looks up the log property on the resulting object.

然后它在生成的对象上查找log属性。

4. Then it calls it

然后它调用它

So for instance, here's an example where console has been shadowed, and so console.log fails whereas window.console.log works:

例如,这是一个控制台被遮蔽的示例,因此console.log失败而window.console.log工作:

function foo() {
  var console = 42;
  
  try {
    console.log("You WON'T see this.");
  } catch (e) {
  }

  try {
    window.console.log("You WILL see this.");
  } catch (e) {
  }
}
foo();

#3

There is no difference between console.log and window.console.log. Have a check on MDN. They clearly quote -

console.log和window.console.log之间没有区别。检查MDN。他们明确引用 -

The Console object can be accessed from any global object, Window on browsing scopes, WorkerGlobalScope, and its specific variants in workers via property console. It's exposed as Window.console, and can be referenced as simply console.

可以通过属性控制台从任何全局对象,浏览范围上的Window,WorkerGlobalScope及其在工作程序中的特定变体访问Console对象。它作为Window.console公开,可以简单地作为控制台引用。

---

Adding to this, the question may have also been-

除此之外,问题可能还有 -

What's the difference between console.log and window.console.

console.log和window.console之间有什么区别。

The answer for this would be-

对此的答案是 -

console.log is used for logging(as you know).

console.log用于记录(如您所知)。

window.console checks if the console is available(truthy value) so that we can log next.(in case of mobile browsers, they don't support debugger/console)

window.console检查控制台是否可用(真值),以便我们可以记录下一步。(对于移动浏览器,它们不支持调试器/控制台)

Common pattern in code for this is-

代码中的常见模式是 -

window.console && console.log(open_date);

window.console && console.log(open_date);

Which is basically short code for -

这基本上是短代码 -

if( window.console ) {
    console.log( open_date );
}