किसी तत्व के उदाहरण पर कार्यों को संलग्न करना

Question

हम एक DOM तत्व को संशोधित कर सकते हैं और इसके प्रोटोटाइप में जोड़ सकते हैं। उदाहरण के लिए, हम कैनवास के लिए एक ही के लिए कुछ जोड़ना चाहते हैं, तो हम कुछ इस तरह करते हैं:

var canvas = document.getElementById('canvasId'); 
canvas.doSomething(...); 

यह है:

HTMLCanvasElement.prototype.doSomething = function(arg) { ... }; 

हम तो एक कैनवास तत्व पर इस क्रिया को निष्पादित कर सकते हैं HTMLCanvasElement के प्रोटोटाइप को संशोधित किए बिना कैनवास के इस उदाहरण में फ़ंक्शन जोड़ने/संलग्न करना संभव है। मैं केवल एक कैनवास चाहता हूं जहां कुछ (...) को अतिरिक्त तरीकों तक पहुंचने के लिए बुलाया गया था, न कि डीओएम में सभी कैनवास तत्व। मैं यह कैसे कर सकता हूँ?

मैं अपने DoSomething समारोह में निम्नलिखित की कोशिश की है:

this.prototype.foobar = function() {...} 

हालांकि, प्रोटोटाइप यहाँ अनिर्धारित रहता है।

Answer 1

Shusl मुझे सही जवाब के साथ आने में मदद की। मैंने सोचा था कि यह आसान था। ऑब्जेक्ट प्रोटोटाइप को संशोधित करने की कोशिश करने के बजाय, मेरे doSomething (args) फ़ंक्शन में, मैंने अभी फ़ंक्शन को सीधे संलग्न किया है।

HTMLCanvasElement.prototype.doSomething = function(args) { 
    this.foobar = function(args) { ... }; 
} 

var canvas = document.getElementById('canvasId'); 
canvas.doSomething(...); 
canvas.foobar(...); 

अब, foobar केवल कैनवास जहां DoSomething बुलाया गया था के कहने के लिए सुलभ है: यहाँ पूर्ण स्रोत कोड है। उसी समय, मुझे इस घटना के बारे में कोई जानकारी नहीं है।

Answer 2

उस मामले में आप सीधे अपने कैनवास वस्तु

var canvas = document.getElementById('canvasId'); 
canvas.doSomething= function() {...}; ///doSomething will only be available to this particular canvas. 
canvas.doSomething(...); 

Answer 3

jQuery के साथ

करने के लिए एक method अताशे सकते हैं, आप data संपत्ति का उपयोग कर सकते हैं।

//setting the function 
$('element').data('doSomething', function(arg) { ... }); 
//calling the function 
$('element').data('doSomething')(arg); 

JSFiddle