Question

我正在尝试使用Proxy object Image来捕获属性，但即使使用空处理程序，我也会收到错误消息。

TypeError：Node.appendChild的参数1没有实现接口节点。

代理对象假设充当目标对象，所以这让我感到困惑。据我所知，您应该能够使用DOM nodes（？）来完成此操作。

：我无法开始加载图片，并在设置onload属性时触发src处理程序。

我应该如何使用代理，以便我可以“接管”例如“src”属性，否则它会像常规图像对象一样？

我的代码

'use strict';

//--- normal image use ---
var imgNormal = new Image();
imgNormal.onload = function(){
  console.log('Normal loaded OK');
  document.body.appendChild(imgNormal);
};
imgNormal.src = 'https://i.imgur.com/zn7O7QWb.jpg';

//--- proxy image ---
var imgProxy = new Proxy(Image, { // I also tried with 'new Image()' and HTMLImageElement
  set: function(a,b,c,d){
    console.log('set '+b);
    return Reflect.set(a,b,c,d);
  }
});
imgProxy.onload = function(){
  console.log('Proxy loaded OK');
  document.body.appendChild(imgProxy);
};
imgProxy.src = 'https://i.imgur.com/zn7O7QWb.jpg';

document.body.appendChild(imgProxy); // double-up to demo error

更新：感谢@Harangue！ ~~使用“new”（bah ..）肯定使代理对象变得生动，但~~现在我无法捕获属性的设置。它似乎完全忽略了陷阱 - 例如：

var proxy = new Proxy(Image, {
      set: function(a,b,c,d){
        console.log('set '+b);        // doesn't show
        return Reflect.set(a,b,c,d);
      }
    });

    var imgProxy = new proxy();
    imgProxy.onload = function(){
      console.log('Proxy loaded OK');
      document.body.appendChild(imgProxy);
    };
    imgProxy.src = 'https://i.imgur.com/zn7O7QWb.jpg';

如何使用有效代理捕获属性设置？

更新2 另一方面 - 将new与 new 代理一起使用似乎只使用原始构造函数。我能找到的所有例子不使用new：

var myProxy = new Proxy(.., ..);  // should suffer

然后在new myProxy()之上使用然后似乎只使用原始构造函数，这不是我想要的，因为它忽略了陷阱。

var proxy = new Proxy(Image, {}); //should be sufficent??
var proxy2 = new proxy();
console.log(proxy2); //-> says Image (not proxy..)

陷阱似乎在我的第一次尝试中起作用，但代理的行为并不像预期的那样。这太混乱了，太新了。很高兴任何输入如何解决这些问题（陷阱和行为）。

Answer 1

永远不要低估new关键字的重要性。 ;）

//--- proxy image ---
var imgProxy = new Proxy(Image, {  // I also tried with 'new Image()'
  set: function(a,b,c,d){
    console.log('set '+b);
    return Reflect.set(a,b,c,d);
  }
});
imgProxy.src = 'https://i.imgur.com/zn7O7QWb.jpg';

document.body.appendChild(new imgProxy); // double-up to demo error

使用代理可以有效地扩展Image对象。但是发送Image构造函数本身，而不是它返回的DOM节点，确实会丢失所需的appendChild。

Answer 2

作为代理的替代方法，您还可以覆盖对象本身的属性，从而控制它的行为：

function findDescriptor(obj, prop){
    if(obj != null){
        return Object.hasOwnProperty.call(obj, prop)?
            Object.getOwnPropertyDescriptor(obj, prop):
            findDescriptor(Object.getPrototypeOf(obj), prop);
    }
}

var img = new Image();
var {get, set} = findDescriptor(img, "src");

Object.defineProperty(img, "src", {
    configurable: true,
    enumerable: true,

    //get: get,  //keep behaviour
    get(){       //overwrite getter
        var v = get.call(this);  //call the original getter
        console.log("get src:", v, this);
        return v;
    },

    //same for setter
    set(v){
        console.log("set src:", v, this);
        //modify value before applying it to the default setter
        v = v.toLowerCase();
        set.call(this, v);
    }
});

img.src = "FileWithUppercaseLetters.jpg"; //setter
img.src;  //trigger getter

由于此属性是在Image.prototype *上定义的，因此您可以简单地扩展此类并修改继承类的原型上的行为

*至少在FF中，必须检查其他浏览器

代理对象无法添加到DOM（陷阱也不会触发）

2 个答案: