`this`はJavascriptでどのように動作しますか？

Question

thisの仕組みを完全に理解していません。例えば、今

var logger = { 
x: 0, 
updateCount: function(){ 
    this.x++; 
    console.log(this.x); 
    } 
} 

は、私が読んだから、updateCountはloggerのプロパティとして呼ばれthisの値はloggerでなければなりません。では、なぜ以下のコードは動作しないのですか？

document.querySelector('button').addEventListener('click', logger.updateCount); 

また、これはなぜ機能しますか？

document.querySelector('button').addEventListener('click', function(){ 
logger.updateCount(); 

}）;

Answer 1

最初の関数では、関数をパラメータとして渡しており、そこでは関数が呼び出されます。したがって、呼び出し元はロガーではありません。そして、「これ」は発信者によって異なります。もう1つは、ロガーから関数を呼び出すため、「this」はロガーです。

"this"がロガーとして設定されるように、最初のものを次のように変更できます。

document.querySelector('button').addEventListener('click', logger.updateCount.bind(logger));