JavaScriptクラスのイベントリスナーで古いコンテキスト変数が表示されるのはなぜですか？

Question

私はスコープが匿名関数を使ってJavaScriptでどのように処理されるかについて私が知っているすべてを無視するような問題を抱えていますが、それは私が考えていない何か他のものかもしれません。

function Element(boxElement) { 
    var self = this; 

    // Set jquery instance variables 
    self.pageElement = null; 
    self.boxElement = boxElement; 

    ... blah blah blah 

    // Implement triggers to empty functions 
    self.onElementClicked = function() {}; 

    // Bind listeners 
    self._bind_listeners(); 
} 

bind_listeners方法は、このような

Element.prototype._bind_listeners = function() { 
    var self = this; 

    self.boxElement.on('click', function (e) { 
     // Don't handle if handled already 
     if (e.isDefaultPrevented()) return; 
     console.log("Got past the return"); 
     self.onElementClicked(); 
    }); 
}; 

として定義され、コールバックを設定する方法もあります：

は、私は次のようにコンストラクタで、要素と呼ばれるJavaScriptオブジェクトを、持っていますメソッドonElementClicked：

Element.prototype.on_element_click = function(callback) { 
    var self = this; 
    self.onElementClicked = callback; 
}; 

問題は私が遭遇しているon_element_clickメソッドを使用してコールバックを設定した場合、自分のメソッドは現在のインスタンスを認識しません。インスタンスは構築直後にどのように見えるかを確認します。

もっと具体的には、JQuery要素を参照するboxElementというインスタンス変数があります。また、Chromeのコンソールでは、インスタンス（self）がページの正しい要素を参照していますが、onElementClickedインスタンス変数（およびその他）はリスナー内から設定されていないようです。

私の説明を改訂したり、説明を求めても構いません。実装の観点から

：

私はこれを行う場合：

// Set default listener for element click 
formElement.on_element_click(function() { 
    console.log("Hello"); 
}); 

リスナーをonElementClickedが設定されて表示されないためこんにちは言うことはありません。

しかし、私が代わりにこれを行う場合：

formElement.boxElement.click(function() { 
    console.log("Hello"); 
}); 

それは成功したと言い、「こんにちは」と私は混乱します。

Answer 1

このようなエラーがどのように発生する可能性があるかという良い例です。 （offtopic：このエラーを発生させるための他の方法については自由に回答してください - それは非常に非直感的な問題であり、常に外部要因によるものです）

私がテストしたクラスはaクラス私の要素クラス - しかし、それは非常に間違って非常に/非常に非常に悪い！

は同様に、それはこれを投稿することであるとして恥ずかしい、ここで私の「サブクラス」（すぐに見かけ上の理由のために引用符）の元コンストラクタがあります：

function StrikeoutFormElement (formElement) { 
    var self = this; 

    // Set reference to form element 
    self.fe = formElement; 

    $.extend(self, self.fe); 

    // Override methods 
    self.on_reposition(function() { 
     self._on_reposition(); 
    }); 
} 

私が何かを上書きするjQueryのオブジェクト拡張機能とハックの回避策を使用しました。私はOOPのためにJQueryの拡張を決して使用しないという難しい方法を学んだ。それは、言語ツールとしてではなく、データ操作用であるためだ。

新しいコンストラクタは次のようになります。

function StrikeoutFormElement (elem) { 
    var self = this; 

} 
// Extend the FormElement prototype 
StrikeoutFormElement.prototype = Object.create(Element.prototype); 
StrikeoutFormElement.prototype.constructor = Element; 

これはどこかMDNの記事に記載されている方法です。誰かが私にそれを打つことがない場合、私はそれを見つけると、私はソースを投稿します。

このあいまいな問題を見て、それを理解しようとした人には大声で叫ぶ！