Object.observe()不工作本机图像对象

Question

这不起作用(在OSX上的chrome 39中)：

var x = new Image();
Object.observe(x, function(){console.log('i never run');})
x.src = 'http://www.foo.com';
console.log('has been set: ' + x.src);

但这将：

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

这一点也是如此：

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

因此，这个问题并不直接与图像是一个本地构造函数有关(因为XMLHttpRequest按预期工作)--它似乎是特定于设置img.src的。我只能猜测这是因为设置src非常类似于一个方法(因为它会导致请求的发出)。JS中是否有这样一种方法，可以像属性一样调用？

假设不是这样的话，是否有人知道/能够猜测这是否是Object.observe的理想行为(在mdn文档中什么都看不见)，如果没有，我可以在哪里报告它是一个bug呢？

Answer 1

x.src =是x.setAttribute('src', ...的一种缩写，设置属性不会触发Object.observe--这是DOM世界，而不是JS对象世界。HTMLElements上的属性是而不是 JS对象属性(尽管有时它们假装是；实际上它们隐藏在attributes属性中作为NamedNodeMap)，JS对象属性是Object.observe观察到的。您可以通过在图像上设置一个非属性属性来验证这一点，并看到观察者函数的触发。

在XMLHttpRequest上设置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'