Firefox と比べて Chrome と Safari コンソールのオブジェクト表示に異常が発生するのはなぜですか?

ブラウザ コンソールのオブジェクト表示の異常

プログラミングにおけるデバッグには、コンソール内のオブジェクトのプロパティと値の検査が含まれます。ただし、Chrome、Firefox、Safari のブラウザ コンソールでオブジェクトを表示すると、予期しない不一致が発生する可能性があります。

Chrome と Safari と Firefox: オブジェクト値の不一致

質問で提供されている 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 の Firebug では期待値が次のように表示されます:

Object { bar=1111}
1111
Object { bar=2222}
2222

Chrome と Safari のコンソールは独特の動作を示します:

Object { bar=2222}
1111
Object { bar=2222}
2222

矛盾の説明

Chrome と Safari のコンソールの動作は、設計上の決定に基づいています。オブジェクトが最初に console.log に渡されるとき、それは参照として扱われます。同じオブジェクトの後続のログには、最初のログの時点の値ではなく、現在の値が表示されます。

コンソールでオブジェクトのタブが展開されると、その値は固定され、元のオブジェクトから切り離されます。 。その結果、後でオブジェクトの値を変更しても、展開されたタブでの表示には影響しません。

回避策

この不一致を回避するには、開発者はオブジェクトをシリアル化するメソッドを使用できます。オブジェクトを非オブジェクト値に変換する (JSON 文字列化など):

<code class="javascript">console.log(JSON.stringify(foo));</code>

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