javascript 在元素的实例上附加函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12656729/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Attaching functions on an instance of an element
提问by Sai
We can modify a DOM element and add to its prototype. For example, if we want to add something only to the canvas, we'd do something like this:
我们可以修改一个 DOM 元素并添加到它的原型中。例如，如果我们只想在画布上添加一些东西，我们会做这样的事情：
HTMLCanvasElement.prototype.doSomething = function(arg) { ... };
We can then perform this action on a canvas element:
然后我们可以在画布元素上执行此操作：
var canvas = document.getElementById('canvasId');
canvas.doSomething(...);
Is it possible to add/attach a function to this instance of the canvas without modifying the prototype of HTMLCanvasElement. I only want a canvas where doSomething(...) was called to have access to the additional methods, not all canvas elements in the DOM. How can I do this?
是否可以在不修改 HTMLCanvasElement 原型的情况下将函数添加/附加到画布的这个实例。我只想要一个调用 doSomething(...) 的画布来访问其他方法，而不是 DOM 中的所有画布元素。我怎样才能做到这一点？
I've tried the following in my doSomething function:
我在 doSomething 函数中尝试了以下操作：
this.prototype.foobar = function() {...}
However, prototype is undefined here.
然而，原型在这里是未定义的。
采纳答案by Sai
Shusl helped me come up with the correct answer. It was easier than I thought. In my doSomething(args) function, instead of trying to modify the object prototype, I just directly attached the function. Here's the full source code:
Shusl 帮我想出了正确的答案。这比我想象的要容易。在我的 doSomething(args) 函数中，我没有尝试修改对象原型，而是直接附加了该函数。这是完整的源代码：
HTMLCanvasElement.prototype.doSomething = function(args) {
this.foobar = function(args) { ... };
}
var canvas = document.getElementById('canvasId');
canvas.doSomething(...);
canvas.foobar(...);
Now, foobar is only accessible to the instance of the canvas where doSomething was called. At the same time, I don't have to have any information about the instance.
现在， foobar 只能被调用 doSomething 的画布实例访问。同时，我不需要任何关于实例的信息。
回答by Anoop
In that case you can directly attache a methodto your canvas object
在这种情况下，您可以直接将 a 附加method到您的画布对象
var canvas = document.getElementById('canvasId');
canvas.doSomething= function() {...}; ///doSomething will only be available to this particular canvas.
canvas.doSomething(...);
回答by Austin Brunkhorst
回答by Josh Haughton
Object.defineProperty(element, 'doSomething', {value:function(arg){ ... }} );
Object.defineProperty(element, 'doSomething', {value:function(arg){ ... }} );
Where 'element' is the element you want to add the property to, 'doSomething' is the name and the third argument is an object of the property its self. In your case a function.
其中“ element”是您要向其添加属性的元素，“ doSomething”是名称，第三个参数是属性自身的对象。在你的情况下，一个函数。
For example:
例如：
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.The 'configurable' property specifies if you would like the 'doSomething' property to be able to be changed again after it is created. Check out the MDN Detailsfor more information and examples.
'configurable' 属性指定您是否希望在创建后能够再次更改 'doSomething' 属性。查看MDN 详细信息以获取更多信息和示例。
