Adjuntar funciones en una instancia de un elemento

Question

Podemos modificar un elemento DOM y agregarlo a su prototipo. Por ejemplo, si queremos añadir algo a solamente a la lona, ​​nos gustaría hacer algo como esto:

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

A continuación, puede realizar esta acción en un elemento canvas:

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

¿Es es posible agregar/adjuntar una función a esta instancia del lienzo sin modificar el prototipo de HTMLCanvasElement. Solo quiero un lienzo donde se llamó a Algo (...) para tener acceso a los métodos adicionales, no a todos los elementos de lienzo en el DOM. ¿Cómo puedo hacer esto?

he probado el siguiente en mi función doSomething:

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

Sin embargo, el prototipo no está definido aquí.

Answer 1

Shusl me ayudó a dar con la respuesta correcta. Fue más fácil de lo que pensaba. En mi función doSomething (args), en lugar de tratar de modificar el prototipo del objeto, simplemente adjunté directamente la función. Aquí está el código fuente completo:

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

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

Ahora, foobar sólo se puede acceder a la instancia del lienzo, donde fue llamado doSomething. Al mismo tiempo, no necesito tener ninguna información sobre la instancia.

Answer 2

En ese caso se puede attache directamente un method a su objeto canvas

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

Answer 3

con jQuery, puede utilizar la propiedad data.

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

JSFiddle