Chrome では、consoleオブジェクトは同じことを実行すると思われる 2 つのメソッドを定義します。
console.log(...)
console.dir(...)
どこかのオンライン サイトで、dirログに記録する前にオブジェクトのコピーを取得するのに対し、 はlogコンソールに参照を渡すだけなので、ログに記録したオブジェクトを検査するまでに変更されている可能性があると読みました。ただし、いくつかの予備テストでは、違いはなく、どちらもログに記録されたときとは異なる状態でオブジェクトが表示される可能性があることが示唆されています。
私の言っていることを理解するには、Chrome コンソール ( Ctrl+ Shift+ ) でこれを試してください。J
> o = { foo: 1 }
> console.log(o)
> o.foo = 2
ここで、[Object]ログ ステートメントの下の を展開し、値が 2 であることに注目してください。の代わりにfooを使用して実験を繰り返した場合も同様の結果になります。dirlog
私の質問は、なぜこれら 2 つの一見同一の関数が に存在するのかということですconsole。
ベストアンサー1
Firefox では、これらの関数の動作はまったく異なります。つまり、表現logのみを出力しますtoStringが、dirナビゲート可能なツリーを出力します。
Chrome では、ほとんどの場合、logすでにツリーが出力されています。ただし、Chrome では、プロパティがある場合でも、特定のクラスのオブジェクトが文字列化されます。おそらく、違いの最も明確な例は正規表現です。log
> console.log(/foo/);
/foo/
> console.dir(/foo/);
* /foo/
global: false
ignoreCase: false
lastIndex: 0
...
通常のオブジェクトとは異なる方法で ged される配列 (例: console.dir([1,2,3]))では、明らかな違いがわかります。log
> 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オブジェクトも異なる動作を示します。他の回答で述べたように。