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

Question

我试图创建一个陷阱属性的Proxy对象,Image但即使使用空处理程序,我收到一条错误消息.

TypeError:Node.appendChild的参数1没有实现接口Node.

代理对象假设充当目标对象,所以这让我感到困惑.据我所知,你也应该能够使用DOM节点(？).

另外:我无法开始加载图像并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:

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 Node，确实会丢失所需的appendChild.