Chrome、Firefox、Safari などのブラウザ コンソールでオブジェクト表現が異なるのはなぜですか?

ブラウザ コンソールでのオブジェクト表現の違い

Web 開発では、ブラウザのコンソールでのオブジェクトの動作を理解することが重要です。ただし、Chrome、Firefox、Safari などのブラウザ間でオブジェクト表現が異なると、問題が生じる可能性があります。

次の JavaScript について考えてみましょう。

<code class="javascript">var foo = {bar : 1111};
console.log(foo);
console.log(foo.bar);

foo.bar = 2222;
console.log(foo);
console.log(foo.bar);</code>

Firefox のコンソールでは、予期される動作は次のようになります。観察された結果:

Object { bar=1111}
1111

Object { bar=2222}
2222

ただし、Safari と Chrome のコンソールでは、異なる動作が発生します:

Object { bar=2222}
1111

Object { bar=2222}
2222

この相違は、Chrome と Safari のコンソールでの設計上の決定に起因します。 console.log をオブジェクト引数とともに使用すると、オブジェクト参照が記録されます。オブジェクト タブを開くと、オブジェクトはコンソール内で一定のままになり、最新の値を参照します。

Chrome と Safari では、オブジェクトはタブを開いたときに事実上「キャッシュ」されます。同じオブジェクトの後続のログは、同じキャッシュされたオブジェクトを参照し、その現在の状態を反映します。

ブラウザ開発チームは、この動作をバグとはみなしません。これは、特定の設計選択に起因する既知の「問題」です。

この問題を軽減するには、代替メソッドを使用してオブジェクトの非オブジェクト表現を取得できます。たとえば、JSON.stringify() を使用してオブジェクトをシリアル化すると、ログ記録時の状態のスナップショットが提供されます。

以上がChrome、Firefox、Safari などのブラウザ コンソールでオブジェクト表現が異なるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。