Присоединение функций к экземпляру элемента

Мы можем изменить элемент DOM и добавить его прототип. Например, если мы хотим добавить что-то только на холст, мы бы сделали что-то вроде этого:

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

Затем мы можем выполнить это действие для элемента canvas:

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

Можно ли добавить/прикрепить функцию к этому экземпляру холста, не изменяя прототип HTMLCanvasElement. Я только хочу, чтобы холст, где вызывался doSomething (...), имел доступ к дополнительным методам, а не ко всем элементам холста в DOM. Как я могу это сделать?

Я попробовал следующее в моей функции doSomething:

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

Однако прототип здесь не определен.

Ответ 1

Shusl помог мне придумать правильный ответ. Это было легче, чем я думал. В моей функции doSomething (args) вместо того, чтобы пытаться модифицировать прототип объекта, я просто привязал функцию непосредственно. Здесь полный исходный код:

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

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

Теперь foobar доступен только для экземпляра холста, где вызывалось doSomething. В то же время, я не должен иметь никакой информации о экземпляре.

Ответ 2

В этом случае вы можете напрямую подключить a method к вашему объекту canvas

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

Ответ 3

С помощью jQuery вы можете использовать свойство data.

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

JSFiddle

Ответ 4

Object.defineProperty(element, 'doSomething', {value:function(arg){ ... }} );

Где element'- это элемент, к которому вы хотите добавить свойство, doSomething - это имя и Третий аргумент является объектом собственности сам по себе. В вашем случае это функция.

Например:

var mycanvas = document.createElement("canvas");

Object.defineProperty(mycanvas, 'doSomething', {
  value: function(x){console.log(x); },
  configurable: true 
});

mycanvas.doSomething('my message');
//prints 'my message' to the console.