要素のインスタンスに関数をアタッチする

Question

DOM要素を変更してそのプロトタイプに追加することができます。我々は唯一のキャンバスに、我々はこのような何かをしたいために何かを追加したい場合たとえば、：

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

私たちは、その後、canvas要素の上にこのアクションを実行することができます。

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

がそれですHTMLCanvasElementのプロトタイプを変更することなく、このキャンバスのインスタンスに関数を追加/追加することができます。私は、doSomething（...）がDOMのすべてのキャンバス要素ではなく、追加のメソッドにアクセスできるように呼び出されたキャンバスのみが必要です。これどうやってするの？

私はdoSomethingの機能に次のように試してみた：

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

ただし、プロトタイプはここで定義されていません。あなたが直接jQueryを使って、あなたのキャンバスオブジェクトにmethod

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

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

、あなたはdataプロパティを使用することができます。

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

JSFiddle

Answer 3

をアタッシュケースことができ、その場合には