0

这不起作用（在 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 作为本机构造函数没有直接关系（因为 XMLHttpRequest 按预期工作） - 它似乎是特定于设置 img.src 的东西。我只能猜测这是因为设置 src 的行为很像方法（因为它会导致发出请求）。JS中是否存在可以像属性一样调用的方法？

假设不是这样，有没有人知道/可以猜测这是否是 Object.observe 的期望行为（在mdn docs 中看不到任何内容），如果不是，我将其报告为错误的最佳位置可能是哪里？

4

2 回答 2

1

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

设置srconXMLHttpRequest有效，因为XMLHttpRequest它只是一个普通的旧 JS 对象，并且src只是一个普通的旧属性。

如果要观察属性变化，可以使用变异观察者。

于 2014-12-11T16:48:11.623 回答
0

正如其他人所提到的，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'
于 2014-12-11T17:02:05.423 回答