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相关（因为XMLHttpRequest按预期工作） - 它似乎是设置img.src的特定内容。我只能猜测它是因为设置一个src的行为很像一个方法（因为它导致了请求的产生）。在JS中有这样的东西可以被称为属性吗？

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

Answer 1

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

在Object.observe上设置src是有效的，因为XMLHttpRequest只是一个普通的旧JS对象而XMLHttpRequest只是一个普通的旧属性。

如果要观察属性更改，可以使用变异观察器。

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'

Object.observe（）不适用于本机Image对象

2 个答案: