関数オブジェクトのclickイベントの後にこのコンテキストを保持します

Question

私は関数を持つオブジェクトを持っています。

var app = { 

    functOne: function(){ 
    document.querySelector('button').addEventListener('click', this.functTwo); 
    }, 

    functTwo: function(){ 
    console.log('Funct Two has Run'); 
    this.functThree(); 
    }, 

    functThree: function(){ 
     console.log('Funct Three has Run'); 
    } 
}; 

app.functOne(); 

functOneのアプリは、ボタンにクリックハンドラを付けて（functTwoを起動するために）、クリックハンドラをアタッチします。 FunctTwoはFunctThreeを実行することになっていますが、 'this'のコンテキストはもはや 'app'ではありません（今はボタンです）。 functTwoの内部から（または渡された） 'app'をもう一度取得するにはどうすればよいのですか？

Answer 1

これはFunction.prototype.bind()を使用することによって達成される：

functOne: function(){ 
    document.querySelector('button').addEventListener('click', this.functTwo.bind(this)); 
    },