javascript - Object.observe() 不适用于 native Image 对象

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';

所以问题与 Image 作为 native 构造函数没有直接关系(因为 XMLHttpRequest 按预期工作) - 它似乎是特定于设置 img.src 的问题。我只能猜测这是因为设置 src 的行为很像一种方法(因为它会导致发出请求)。 JS中有没有像属性一样可以调用方法的东西？

假设不是这样，有谁知道/可以猜测这是否是 Object.observe 所需的行为(在 mdn docs 中看不到任何内容)，如果不是，哪里可能是我报告它的最佳位置作为错误？

Answer 1

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

在 XMLHttpRequest 上设置 src 是有效的，因为 XMLHttpRequest 只是一个普通的旧 JS 对象，而 src 只是一个上面有普通的旧属性(property)。

如果你想观察属性变化，可以使用突变观察器。