なぜ機能参照を無名関数にラップすると 'this'の点を訂正できますか？

Question

なぜ機能参照を無名関数にラップすると 'this'の点を修正できますか？

var logger = { 
    x: 0, 
    updateCount: function() { 
    this.x++; 
    console.log(this.x); 
    console.log("Now I'm pointing to : " + this); 
    } 
} 

私は匿名関数の内部でlogger.updateCountをラップするとき、私は、この

btn.addEventListener('click', logger.updateCount); 

// may work like below 
function cb() { 
    console.log(this); 
} 

addEventListener('click', cb) { 

    // this --> DOM element 

    cb(); //=> console.log(this) --> DOM element 

} 

のように呼び出すしかし、 'これ' をcorrentことができますか？

btn.addEventListener('click', function (e) { 
    logger.updateCount(); //=> this -- point to 'logger' object 
}); 

どのように来ますか？

Answer 1

ただ、おそらく好きで、それはbtn.addEventListenerの内部にどのように見えるかを「想像」：あなたはaddEventListenerだけコールバック関数がある知っているが、その場合は知っていないことがわかり、このことから

function addEventListener(eventString, callback) { 

    // check the event 
    // if all is good 
    // set up an event object 
    // call back 
    callback(eventObject); 

} 

thisは特定のオブジェクトである必要があります。

とJSが動作する方法、それは、（第二の例logger.updateCount()のように）ドットの前にいくつかのオブジェクトを見つけた場合、それはthisとしてそれを使用しますが、そうでない場合は...その後、あなたがbindに必要であることを前提としていた場合

btn.addEventListener('click', logger.updateCount.bind(logger)); 

Answer 2

（これは）コールサイト（関数の呼び出し方法）に基づいて解決されています。

1. この関数が.func（）のように使用されている場合、メソッドとして呼び出された場合は、このように渡されます。 logger.updateCount（）はイベントリスナーで呼び出されますが、updateCountメソッドからは重要ではありません。このように常にロガーオブジェクトを受け取ります。これはロガーオブジェクトにハードバインドされています。

2. 関数オブジェクトがイベントハンドラまたはコールバックとして渡される場合。これはイベントがトリガーされるDOM要素にバインドされます。

3. 関数は以下のようにbindメソッド使用して変更することができる受信この文脈：UPDATECOUNTは常にこのコンテキストとしてパラメータとして送信対象物体を受けるであろう上記の場合 logger.updateCount.bind（）

   を