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

Shusl帮我提出了正确的答案。这比我想象的容易。在我的doSomething（args）函数中，我只是直接附加了函数，而不是尝试修改对象原型。这是完整的源代码：

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

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

现在，foobar只能被调用doSomething的画布实例访问。同时，我不需要有关于该实例的任何信息。

Answer 2

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

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

Answer 3

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

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

<强> JSFiddle

Answer 4

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

要将元素添加到其中的元素“ 元素”， “ 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.

'configurable'属性指定您是否希望'doSomething'属性在创建后能够再次更改。请查看MDN Details，以获取更多信息和示例。

在元素的实例上附加函数

4 个答案: