在元素的实例上附加函数答案

【问题标题】：Attaching functions on an instance of an element在元素的实例上附加函数
【发布时间】：2012-09-29 21:41:06
【问题描述】：

我们可以修改一个 DOM 元素并添加到它的原型中。例如，如果我们只想在画布上添加一些东西，我们会这样做：

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

然后我们可以在画布元素上执行此操作：

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

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

我在 doSomething 函数中尝试了以下方法：

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

然而，原型在这里是未定义的。

【问题讨论】：

标签： javascript html dom

【解决方案1】：

Shusl 帮我想出了正确的答案。这比我想象的要容易。在我的 doSomething(args) 函数中，我没有尝试修改对象原型，而是直接附加了该函数。这是完整的源代码：

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

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

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

【讨论】：

这样所有的实例都可以有 foobar 如果他们调用 doSomething.
可能想在设置之前添加一个检查以查看this.foobar 是否已经存在。这样，每次他们调用doSomething 时，它都不会重新设置this.foobar。
你真正想要的是一个.extend方法：Prototype's Element.extend、jQuery.extend (John Resig article)、YUI、Backbone.js等

【解决方案2】：

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

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

【讨论】：

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.

“configurable”属性指定您是否希望“doSomething”属性在创建后能够再次更改。查看MDN Details 了解更多信息和示例。

【讨论】：