在元素的实例上附加函数

Question

我们可以修改DOM元素并添加到它的原型中.例如,如果我们只想在画布上添加一些东西,我们会做这样的事情:

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

然后我们可以在canvas元素上执行此操作:

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

是否可以在不修改HTMLCanvasElement原型的情况下向该画布实例添加/附加函数.我只想要一个画布,其中调用doSomething(...)来访问其他方法,而不是DOM中的所有画布元素.我怎样才能做到这一点？

我在doSomething函数中尝试了以下内容:

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

但是,原型在这里是未定义的.

Answer 1

舒尔帮我提出了正确的答案.这比我想象的容易.在我的doSomething(args)函数中,我只是直接附加了函数,而不是尝试修改对象原型.这是完整的源代码:

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

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

现在,foobar只能被调用doSomething的画布实例访问.同时,我不必拥有有关该实例的任何信息.

Answer 2

使用 jQuery，您可以使用该data属性。

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

JSFiddle

Answer 3

在这种情况下,您可以直接将a附加method到画布对象

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