प्रॉक्सी ऑब्जेक्ट को डीओएम में जोड़ा नहीं जा सकता है (जाल या तो ट्रिगर नहीं करता है)

Question

मैं Proxy objectImage को गुणों को फँसाने के लिए कोशिश कर रहा हूं लेकिन एक खाली हैंडलर के साथ भी मुझे एक त्रुटि संदेश मिलता है।

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

प्रॉक्सी ऑब्जेक्ट लक्ष्य वस्तु के रूप में कार्य करने का अनुमान है इसलिए यह मुझे थोड़ा परेशान करता है। जहां तक ​​मैं समझता हूं कि आपको DOM nodes के साथ-साथ (?) के साथ ऐसा करने में सक्षम होना चाहिए।

इसके अलावा: मैं छवि लोड करने शुरू नहीं कर सकते और 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" (बाह ..) का उपयोग करके निश्चित रूप से प्रॉक्सी ऑब्जेक्ट जीवन में आया लेकिन अब मैं गुणों की सेटिंग को फंसाने में असमर्थ हूं। यह जाल पूरी तरह से उपेक्षा करने लगते हैं - उदाहरण:

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 का उपयोग कर केवल मूल निर्माता का उपयोग करने लगते हैं। सभी उदाहरण मैं पा सकते हैं नहीं नई का उपयोग करता है:

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

कि new myProxy() के शीर्ष पर तो का उपयोग केवल मूल निर्माता जो नहीं है मैं के रूप में यह जाल पर ध्यान नहीं देता क्या चाहते हैं उपयोग करने के लिए लग रहे हैं।

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 

प्रॉक्सी के साथ आप छवि वस्तु को प्रभावी ढंग से बढ़ाते हैं। लेकिन डीओएम नोड के बदले में छवि कन्स्ट्रक्टर को भेजकर, वास्तव में आवश्यक 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 * पर परिभाषित किया गया है, तो आप बस इस वर्ग का विस्तार कर सकते और के प्रोटोटाइप पर व्यवहार को संशोधित विरासत में मिला कक्षा

* कम से कम एफएफ में, अन्य ब्राउज़रों