无法将代理对象添加到DOM(陷阱也不会触发) [英] Proxy object cannot be added to DOM (traps doesn't trigger either)

问题描述

我正在尝试制作一个 Proxy对象(Image)来捕获属性，但是即使使用空处理程序，我也会收到错误消息.

I am trying to make a Proxy object of Image to trap properties but even with an empty handler I get an error message.

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

TypeError: Argument 1 of Node.appendChild does not implement interface Node.

假定代理对象充当目标对象，因此这让我有些困惑.据我了解，您应该可以使用

The proxy object is suppose to act as the target object so this baffles me a little. As far as I understand you should be able to do this with DOM nodes as well (?).

也:设置src属性时，我无法开始加载图像并触发onload处理程序.

Also: I cannot start loading the image and have the onload handler triggered when setting the src property.

我应该如何使用代理，以便可以接管"例如"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 ..)当然使代理对象栩栩如生，但是现在我无法捕获属性的设置.似乎完全忽略了陷阱-示例:

Update: Thanks to @Harangue! using "new" (bah..) certainly made the proxy object come to life but now I am unable to trap the setting of properties. It seem to ignore the trap completely - example:

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 代理一起使用似乎仅使用原始构造函数.我可以找到的所有示例都 not 不使用new:

Update 2 On the other hand - using new with the new proxy only seem to use the original constructor. All examples I can find does not use new:

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

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

Using then on top of that new myProxy() only seem to use the original constructor which is not what I want as it ignores the traps.

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

该陷阱似乎在我的第一次尝试中起作用，但是该代理的行为不符合预期.这是如此令人困惑，而且太新了.对于任何输入都可以解决这两个问题(陷阱和行为)感到高兴.

The traps seem to work in my first attempts but the proxy doesn't behave as expected. This is so confusing, and so new. Happy for any input how both of these can be solved (traps and behavior).

推荐答案

请永远不要低估new关键字的重要性. ;)

Never underestimate the importance of the new keyword. ;)

//--- 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.

With the proxy you effectively extend the Image object. But sending the Image constructor itself, rather than the DOM Node returned by it, would indeed be missing the needed appendChild.

这篇关于无法将代理对象添加到DOM(陷阱也不会触发)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！