在元素的实例上附加函数

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

在这种情况下，您可以直接将qazxsw poi附加到画布对象

method

Answer 3

使用jQuery，您可以使用

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

属性。

data

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

Answer 4

JSFiddle

'element'是要添加属性的元素，'doSomething'是名称，第三个参数是属性的对象。在你的情况下一个功能。

例如：

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

'configurable'属性指定您是否希望'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.

以获取更多信息和示例。