Chrome、Firefox、Safari でコンソール ログに異なる値が表示されるのはなぜですか?

Chrome、Firefox、Safari のコンソール オブジェクト値の違い

JavaScript では、オブジェクトは参照によって保存されます。つまり、console.log が呼び出します。オブジェクト引数を指定すると、オブジェクト参照のログが記録されます。これにより、コンソールでオブジェクトを表示するときに予期しない動作が発生する可能性があります。

Firefox の Firebug では、オブジェクトのログに常に正しい値が表示されます。

Object { bar=1111 }
1111

Object { bar=2222 }
2222

ただし、Chrome および Safari のコンソールでは、異なる動作が観察されます:

Object { bar=2222 }                      // Object shows updated value
1111                                      // Attribute value remains unchanged

Object { bar=2222 }                      // Object shows updated value
2222                                      // Attribute value is correct

この不一致は、最初の console.log 呼び出しの後にオブジェクトをキャッシュするという Chrome (および WebKit を使用する Safari) の設計上の決定に起因します。キャッシュされた値は、その間にオブジェクトが更新された場合でも、後続のすべての console.log 呼び出しに使用されます。

この混乱を避けるために、次のような非オブジェクト メソッドを使用してオブジェクト値をログに記録することをお勧めします。

console.log(JSON.stringify(foo));      // Serializes the object into a JSON string

代わりに、同様の機能を提供する Chrome の toJSON メソッドと valueOf メソッドを使用することもできます。

console.log(foo.toJSON());                // Invokes the object's `toJSON` method (if defined)
console.log(foo.valueOf());               // Invokes the object's `valueOf` method (if defined)

これらの手法を使用すると、コンソールに表示される値が次のようになります。オブジェクトの実際の状態と一致しています。

以上がChrome、Firefox、Safari でコンソール ログに異なる値が表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。