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';
有効なプロキシを使用してプロパティ設定をトラップするにはどうすればよいですか?
Update 2一方new
、新しいプロキシで使用すると、元のコンストラクターのみが使用されるようです。私が見つけることができるすべての例は new を使用していません:
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..)
トラップは最初の試行では機能しているように見えますが、プロキシは期待どおりに動作しません。これは非常に紛らわしく、非常に新しいものです。これらの両方を解決する方法(トラップと動作)についての入力をお待ちしています。