Javascript *は関数ではありません（プロトタイプ関数）

Question

C++のバックグラウンドから来て、明示的な型付けをしていないオブジェクト指向言語で作業しようとすると頭痛だけです。

私はそれを動作させるために、それぞれに管理するために必要なもののトンがあるので、だから私は、オブジェクトによって「制御」されているWebページのための動的な要素を持っています。この要素は、オブジェクト自体の内部のデータの視覚的な出力に過ぎません。本当に必要なのはそれだけです。

を除いて、クリックすると内部機能を実行するオブジェクトが必要です。それはこれまでの私の頭痛の最大の原因と思われる。

Javascriptを：

function onClick(file) //The external onClick function I use to try to get it to call from. 
{ 
    file.state = INUSE; 
    file.checkState(); 
} 

function fileObject() { //The file object itself 
    this.element; 
    this.newElement();   
    //initialize stuff for the object 
} 

fileObject.prototype.newElement = function() { //creates a new element and sets its event listener 
    this.element.click(function() {onClick(this)}); 
} 

fileObject.prototype.checkState = function() {/*does stuff*/} //apparently this is "not a function" 

私は正確に取得するエラーは、Firefoxのコンソールパネルから "file.checkStateは関数ではありません" です。

私はまだjavascriptの新機能ですが、いくつかのデバッグを行った後、明示的にすべてのエラーの原因となっているのはonClick(this)関数であることがわかりました。何か他のものと一緒に使用する場合、onClick機能が完璧に動作しますが、何らかの理由で、thisキーワードは、すべてのチェックがときのonClickスコープの内部fileがundefinedことを示しているため、実際のFileObjectへの参照を送信するためには表示されません。このスニペットの作業を得るのを助けること

は、私はこれをやろうとしている方法について根本的に間違って何かがあるのか​​、私はちょうどステップを欠落している（または私は必要としない何かを追加すること）しています。

Answer 1

は、あなたが知っているが、あなたの最初の問題は実際にアクションを処理するのではなく、それを聞くことです。 clickは、リスナーではなく合成クリックイベントをトリガーします。

あなたは... .element.addEventListener("click", callback);と言いましたが、その直後にもう1つ問題があります。あなたはそれが問題を混同しないように書かれてきたように 私は...

を私の例のコードを残します。しかし、あなたがclick()を見たときelementが本当にブラウザDOM要素を意味しているのならば、私はaddEventListenerに加入する意味ことを知っています。それが標準のブラウザ要素ではなく、独自のAPIである場合は、前の部分を無視して実行します。

thisは、動的機能（ない定義時）の呼び出し時にバインドされています。

最寄りの機能は、上記スコープ、あなたが.click(...)に渡しているコールバック関数です。

thisとはまったく異なり、の外側にあるコールバックのです。 ドットの左側にあるものは、その特定の呼び出しの継続時間であるthisです。

言うまでもなく、click()は、コールバックの左側にあるthisを拘束するのに十分ではありません。

解決策（または多くのうちの1つ）は、あなたが意味するオブジェクトの値を保持するために語彙スコープおよび/またはクロージャを使用することです。

// easy but messier 
var fileObject = this; 
... .click(function() { onClick(fileObject); }); 


// Cleaner with thunks: 
function clickHandler (onClick, obj) { 
    return function() { onClick(obj); }; 
} 

... .click(clickHandler(this)); 

の

Answer 2

Javascriptが少しクレイジーだと思われる thisを処理する方法C++から来

、あなたが何であるかthisあなたが定義した関数で伝える必要があり、ここのように見える - そのような：

this.element.click(function() {onClick(this)}.bind(this));