Как это работает в Javascript?

Question

Я не совсем понимаю, как работает this. Например,

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

Теперь от того, что я прочитал, значение this когда updateCount называется свойство logger должно быть logger. Так почему же код ниже не работает?

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

Кроме того, почему это работает?

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

});

Answer 1

В первом вы передаете функцию как параметр и вызывается там. Поэтому вызывающий абонент не будет регистрировать. И «это» зависит от вызывающего. На втором, как вы можете видеть, вы вызываете функцию из регистратора, поэтому «это» является регистратором.

Вы можете изменить первый вариант следующим образом, чтобы его «это» задано как регистратор.

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