在Chrome中,console对象定义了两个方法,它们做的事情是一样的:
console.log(...)
console.dir(...)
我在网上读到过,dir在记录对象之前获取了它的一个副本,而log只是将引用传递给控制台,这意味着当你去检查你记录的对象时,它可能已经改变了。然而,一些初步测试表明,两者之间并没有什么区别,而且它们都可能会显示与记录时不同的对象状态。
尝试在Chrome控制台(Ctrl+Shift+J)看看我的意思:
> o = { foo: 1 }
> console.log(o)
> o.foo = 2
现在,展开log语句下面的[Object],注意它显示了值为2的foo。如果使用dir而不是log重复这个实验,情况也是一样的。
我的问题是,为什么这两个看似相同的功能会出现在主机上?
在Firefox中,这些函数的行为非常不同:log只打印出toString表示,而dir打印出可导航的树。
在Chrome中,log已经打印出一棵树——大多数时候。然而,Chrome的日志仍然字符串对象的某些类别,即使他们有属性。也许最明显的区别是正则表达式:
> console.log(/foo/);
/foo/
> console.dir(/foo/);
* /foo/
global: false
ignoreCase: false
lastIndex: 0
...
你还可以看到数组(例如,console.dir([1,2,3]))的明显区别,它的日志记录与普通对象不同:
> console.log([1,2,3])
[1, 2, 3]
> console.dir([1,2,3])
* Array[3]
0: 1
1: 2
2: 3
length: 3
* __proto__: Array[0]
concat: function concat() { [native code] }
constructor: function Array() { [native code] }
entries: function entries() { [native code] }
...
DOM对象也表现出不同的行为,如另一个答案所述。
在Firefox中,这些函数的行为非常不同:log只打印出toString表示,而dir打印出可导航的树。
在Chrome中,log已经打印出一棵树——大多数时候。然而,Chrome的日志仍然字符串对象的某些类别,即使他们有属性。也许最明显的区别是正则表达式:
> console.log(/foo/);
/foo/
> console.dir(/foo/);
* /foo/
global: false
ignoreCase: false
lastIndex: 0
...
你还可以看到数组(例如,console.dir([1,2,3]))的明显区别,它的日志记录与普通对象不同:
> console.log([1,2,3])
[1, 2, 3]
> console.dir([1,2,3])
* Array[3]
0: 1
1: 2
2: 3
length: 3
* __proto__: Array[0]
concat: function concat() { [native code] }
constructor: function Array() { [native code] }
entries: function entries() { [native code] }
...
DOM对象也表现出不同的行为,如另一个答案所述。
根据Felix Klings的建议,我在chrome浏览器中尝试了一下。
Console.dir([1,2])给出如下输出:
Array[2]
0: 1
1: 2
length: 2
__proto__: Array[0]
console.log([1,2])给出如下输出:
[1, 2]
所以我相信console.dir()应该用来获得更多的信息,如原型等数组和对象。