Chrome과 Safari가 Firefox와 비교하여 콘솔에 다른 개체 값을 표시하는 이유는 무엇입니까?

Chrome, Firefox 및 Safari에서 서로 다른 개체 표시 값

다른 브라우저에서 JavaScript 개체를 디버깅할 때 개발자는 콘솔에 표시되는 값에 불일치가 발생할 수 있습니다. 이 문서에서는 관찰된 동작에 대한 설명을 제공하면서 이 문제를 살펴봅니다.

문제

다음 JavaScript 코드를 고려하세요.

var foo = {bar: 1111};
console.log(foo);
console.log(foo.bar);

foo.bar = 2222;
console.log(foo);
console.log(foo.bar);

Firefox에서 예상되는 출력은 다음과 같습니다. 관찰됨:

Object { bar=1111}
1111

Object { bar=2222}
2222

그러나 Chrome과 Safari에서는 출력이 다릅니다.

Object { bar=2222}
1111

Object { bar=2222}
2222

설명

이 차이는 Chrome의 디자인 결정에서 발생합니다(그리고, 확장하면 Safari의) 브라우저 콘솔이 됩니다. 객체를 기록할 때 Chrome은 객체 자체에 대한 참조를 생성합니다. 콘솔에서 개체 탭을 클릭하여 열면 이후 개체 변경에 관계없이 기록된 값이 일정하게 유지됩니다. 이로 인해 표시된 값과 메모리에 있는 개체의 실제 값 사이에 불일치가 발생합니다.

해결 방법

이 문제를 해결하고 Chrome 및 Safari에서 예상되는 출력을 얻으려면 개발자는 모든 방법을 사용할 수 있습니다. JSON.stringify()와 같은 객체 직렬화:

console.log(JSON.stringify(foo));

이렇게 하면 객체의 JSON 표현이 표시되어 모든 브라우저에서 일관된 출력이 보장됩니다.

위 내용은 Chrome과 Safari가 Firefox와 비교하여 콘솔에 다른 개체 값을 표시하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!