DOMにプロキシオブジェクトを追加できません（トラップはトリガーされません）

Question

をImageにトラップするようにしようとしていますが、空のハンドラでもエラーメッセージが表示されます。

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

プロキシオブジェクトは、これは私を少しバッフルので、対象物として機能すると仮定されます。私の知る限り、DOM nodes（？）でこれを行うことができるはずです。また

：私はイメージのロードを開始し、srcプロパティを設定するときonloadハンドラをトリガすることはできません。

「src」プロパティなどを「引き継ぐ」ようにプロキシを使用する必要があります。そうでなければ、通常のイメージオブジェクトのように動作させますか？おかげで@Harangueする：私のコード

'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

更新

！ "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';

どのようにすることができますIトラップ有効なプロキシを使用して、プロパティの設定？一方

アップデート2から新しいプロキシとnewを使用してはのみ元コンストラクタを使用しているようです。私は見つけることができるすべての例では、は新しいを使用ししません：そのnew myProxy()の上に、その後使用

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

は、それがトラップを無視するように私が欲しいものではありません、元のコンストラクタを使用しているようです。

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オブジェクトが拡張されます。しかし、それによって返されたDOMノードではなくImageコンストラクタ自体を送信すると、実際には必要なものが見つからなくなりますappendChild。あなたはまた、オブジェクト自体のプロパティを上書きし、したがって、それは行動のコントロールができプロキシに代わるものとして

Answer 2

：

function findDescriptor(obj, prop){ 
    if(obj != null){ 
     return Object.hasOwnProperty.call(obj, prop)? 
      Object.getOwnPropertyDescriptor(obj, prop): 
      findDescriptor(Object.getPrototypeOf(obj), prop); 
    } 
} 

var img = new Image(); 
var {get, set} = findDescriptor(img, "src"); 

Object.defineProperty(img, "src", { 
    configurable: true, 
    enumerable: true, 

    //get: get, //keep behaviour 
    get(){  //overwrite getter 
     var v = get.call(this); //call the original getter 
     console.log("get src:", v, this); 
     return v; 
    }, 

    //same for setter 
    set(v){ 
     console.log("set src:", v, this); 
     //modify value before applying it to the default setter 
     v = v.toLowerCase(); 
     set.call(this, v); 
    } 
}); 

img.src = "FileWithUppercaseLetters.jpg"; //setter 
img.src; //trigger getter 

そして、このプロパティはImage.prototype *上で定義されているので、あなたは、単にこのクラスを拡張することができます少なくともFFで、他のブラウザ