Funktionen an einer Instanz eines Elements anhängen

Question

Wir können ein DOM-Element modifizieren und zu seinem Prototyp hinzufügen. Zum Beispiel, wenn wir etwas nur auf die Leinwand hinzufügen möchten, würden wir so etwas tun:

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

Wir können dann diese Aktion ausführen auf einem Canvas-Element:

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

Ist es Es ist möglich, dieser Instanz der Zeichenfläche eine Funktion hinzuzufügen/anzuhängen, ohne den Prototyp von HTMLcanvasElement zu ändern. Ich möchte nur eine Arbeitsfläche, auf der doSomething (...) aufgerufen wurde, um auf die zusätzlichen Methoden zugreifen zu können, nicht auf alle Canvas-Elemente im DOM. Wie kann ich das machen?

Ich habe folgendes in meiner doSomething Funktion versucht:

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

jedoch Prototyp ist hier nicht definiert.

Answer 1

Shusl half mir mit der richtigen Antwort zu kommen. Es war einfacher als ich dachte. In meiner doSomething (args) -Funktion habe ich die Funktion direkt angefügt, anstatt den Objektprototyp zu ändern. Hier ist die vollständige Quellcode:

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

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

Nun foobar ist nur für die Instanz der Leinwand, wo doSomething genannt wurde. Gleichzeitig muss ich keine Informationen über die Instanz haben.

Answer 2

In diesem Fall können Sie direkt

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

Answer 3

Mit jQuery ein method auf der Leinwand Objekt einhängen können Sie die data Eigenschaft verwenden.

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

JSFiddle