7

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

トラップは最初の試行では機能しているように見えますが、プロキシは期待どおりに動作しません。これは非常に紛らわしく、非常に新しいものです。これらの両方を解決する方法（トラップと動作）についての入力をお待ちしています。

4

2 に答える 2

4

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 オブジェクトを効果的に拡張できます。しかし、それによって返される DOM ノードではなく、Image コンストラクター自体を送信すると、必要なappendChild.

于 2016-08-06T08:45:14.033 に答える