我正在尝试做一个Proxy object of Image捕获属性，但即使使用空处理程序，我也会收到错误消息。
TypeError：Node.appendChild 的参数 1 未实现 Node 接口。
代理对象应该充当目标对象，所以这让我有点困惑。据我了解你应该能够做到这一点DOM 节点以及（？）。
Also：我无法开始加载图像并有onload设置时触发处理程序src财产。
我应该如何使用代理，以便我可以“接管”例如“src”属性，否则让它像常规图像对象一样工作？
My code
'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
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';
如何使用有效代理捕获属性设置？
Update 2另一方面 - 使用new与new代理似乎只使用original构造函数。我能找到的所有例子都是如此not使用新的：
var myProxy = new Proxy(.., ..); // should suffer
在此基础上使用 thennew myProxy()似乎只使用原始构造函数，这不是我想要的，因为它忽略了陷阱。
var proxy = new Proxy(Image, {}); //should be sufficent??
var proxy2 = new proxy();
console.log(proxy2); //-> says Image (not proxy..)
在我的第一次尝试中，陷阱似乎有效，但代理的行为不符合预期。这太令人困惑了，也太新鲜了。很高兴了解如何解决这两个问题（陷阱和行为）。
永远不要低估它的重要性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.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
