15

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

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

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

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

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

我在 doSomething 函数中尝试了以下操作：

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

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

4

4 回答 4

12

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

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

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

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

于 2012-09-29T21:59:15.283 回答
7

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

var canvas = document.getElementById('canvasId');
canvas.doSomething= function() {...}; ///doSomething will only be available to this particular canvas.
canvas.doSomething(...);
于 2012-09-29T21:43:42.073 回答
6

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

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

JSFiddle

于 2012-09-29T21:48:36.640 回答
1

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 详细信息以获取更多信息和示例。

于 2019-02-21T05:12:58.597 回答