Мой новый экземпляр объекта переопределяет мой параметр this?

Question

Моя цель - установить «this» как ссылку на объект кнопки. Я понимаю, что решением моей проблемы было бы использование функции со стрелкой, но мне интересно, переосмыслена ли ссылка на «это» при создании нового экземпляра объекта кнопки? Или метод начального щелчка не наследует ссылку «this» для начала? Если это последнее, то будет ли «this» метода щелчка начальной функцией кнопки?

<button id=“test“> Click Me! </button>    
    <script>
        function Button( ) {     
            this.clicked = false;  
            this.click = function( ) { 
            this.clicked = true;              
            assert(button.clicked, “The button has been clicked“);             

                };         
      }
        var  button = new Button( ); 
        var  elem = document.getElementById(“test“); 
        elem.addEventListener(“click“, button.click);   

прослушивателю событий не удается найти состояние клика

Answer 1

Если вы просто передадите button.click в addEventListener, тогда вы просто передадите функцию, и она будет вызываться без контекста this.

Итак, вы исправите, что привязали функцию кобъект.

Вы можете написать следующее, чтобы привязать функцию щелчка к объекту кнопки как одноразовый:

elem.addEventListener('click, button.click.bind(button));

Или вы можете навсегда привязать функцию щелчка кКнопка объекта, написав следующее в конструкторе:

this.click = this.click.bind(this);

Или вы можете быть экономными с вашим синтаксисом и объединить их вместе, как показано ниже:

this.click = function () {
  // ... your code here ...
}.bind(this);

function Button() {
  this.clicked = false;
  this.click = function () {
    console.log(this.secret);
  }.bind(this);
}
var button = new Button();
button.secret = 'It works';
var elem = document.getElementById('test');
elem.addEventListener('click', button.click);

<button id="test"> Click Me! </button>