Object.observe는()이 (OSX에 크롬 39)이 작동하지 않습니다 기본 이미지 객체

Question

작동하지 않습니다

var x = new function nonNative(){}; 
Object.observe(x, function(){console.log('i will run');}) 
x.src = 'http://www.foo.com'; 

을 그리고이를 것 (XMLHttpRequest의 예상대로 작동하기 때문에)

그래서 문제가 기본 생성자 인 이미지에 직접 관련이 없습니다

var x = new XMLHttpRequest(); 
Object.observe(x, function(){console.log('so will i');}) 
x.src = 'http://www.foo.com'; 

- 특정 일 것 같다 img.src 설정. src를 설정하는 것은 메서드와 비슷하게 동작하므로 (요청이 만들어지기 때문에) 추측 할 수 있습니다. 재산처럼 부를 수있는 방법으로 JS에 그러한 것이 있습니까?

가정하지 않으면 Object.observe의 원하는 동작 (누구도 mdn docs에 아무것도 표시되지 않음)이 있는지 알 수 있습니까? 그렇지 않은 경우 누가 나를보고 할 수있는 가장 좋은 장소가 될지도 모릅니다. 벌레?

Answer 1

x.src =은 x.setAttribute('src', ...의 줄임말이며, 설정 속성은 Object.observe을 트리거하지 않습니다. 이것은 DOM 세계이며 JS 객체 월드가 아닙니다. HTMLElements에 대한 속성은 이 아니며 JS 객체 속성 (경우에 따라 가짜 임에도 불구하고 실제로는 attributes 속성에 NamedNodeMap으로 숨어 있음)이며 JS 객체 속성은 Object.observe에 있습니다. 이미지에 속성이 아닌 속성을 설정하고 관찰자 기능 실행을 확인하여이를 확인할 수 있습니다.

XMLHttpRequest의 설정은 XMLHttpRequest이 일반 일반 JS 개체이며 src은 일반 일반 속성이기 때문에 작동합니다.

속성 변경을 관찰하려면 돌연변이 관찰자를 사용할 수 있습니다.

Answer 2

다른 사람들이 언급했듯이 src은 정의 된 getter/setter 쌍이므로 할당하면 실제로 함수가 호출됩니다.

DOM 요소이므로 MutationObserver을 사용하는 것이 좋습니다.

var x = new Image(); 
var observer = new MutationObserver(function(){ 
    console.log('i will run'); 
}); 

observer.observe(x, {attributes: true}); 

x.src = 'http://www.example.com.com'