scope обработчик события по ссылке в javascript

Question

Я хочу вызвать функцию класса из класса, который я ранее прикреплял к кнопочному объекту, который находится внутри класса (работает следующий код, но область действия callMyClassFunction находится на кнопке и Я хочу, чтобы это было карусель):

//Examplecode 1 
Carousel.prototype.addEventListeners = function(){ 
    this.button.on('click', this.callMyClassFunction); 
} 

Carousel.prototype.callMyClassFunction = function(){ 
    console.log(this); 
} 

Если я связать функцию, как, что он работает (сфера это экземпляр класса):

//Examplecode 2 
Carousel.prototype.addEventListeners = function(){ 
    this.button.on('click', function(){ 
     this.callMyClassFunction() 
    }).bind(this); 
} 

Но я бы скорее хочу добавьте click-eventlistener с ссылкой (например, в примере 1), так как я хочу c все removeListener в еще одной функции:

//Examplecode 3 
Carousel.prototype.removeEventListeners = function(condition){ 
    if(condition){ 
     this.button.removeListener('click', this.callMyClassFunction); 
    } 
} 

Любая помощь очень ценится!

Answer 1

Просто хранить связанный слушателя на вашем экземпляре:

functin Carousel(…) { 
    … 
    this.callMyClassFunction = this.callMyClassFunction.bind(this); 
} 
Carousel.prototype.callMyClassFunction = function(){ 
    console.log(this); 
}; 
Carousel.prototype.addEventListeners = function(){ 
    this.button.on('click', this.callMyClassFunction); 
}; 
Carousel.prototype.removeEventListeners = function(…){ 
    … 
    this.button.removeListener('click', this.callMyClassFunction); 
}; 

Answer 2

Вы можете использовать bind гораздо более просто:

Carousel.prototype.addEventListeners = function(){ 
    this.button.on('click', this.callMyClassFunction.bind(this)); 
}; 

Я не уверен, что bind вы использовали в вашем примере (вы называли его на возвращаемое значение функции on), но выше использует Function#bind, который является частью самого JavaScript (с ES5, его легко подделать/полифорировать для старых браузеров). Function#bind возвращает новую функцию, которая при вызове вызывает исходную функцию с this, установленной на первый аргумент, который вы даете bind. Таким образом, в вышесказанном щелчок вызовет функцию, возвращаемую bind, которая вызовет callMyClassFunction с this, установленным в правильное значение.

Если вам нужно использовать removeListener позже, и это требует же функции передаются в нее, вы должны помнить, функцию, как это:

Carousel.prototype.addEventListeners = function(){ 
    if (!this.boundCallMyClassFunction) { 
     this.boundCallMyClassFunction = this.callMyClassFunction.bind(this); 
    } 
    this.button.on('click', this.boundCallMyClassFunction); 
}; 

Carousel.prototype.removeEventListeners = function(condition){ 
    if(condition && this.boundCallMyClassFunction){ 
     this.button.removeListener('click', this.boundCallMyClassFunction); 
    } 
}; 

Вы не можете просто передать его результат вызова bind, так как это будет другая функция.

Но проверить документацию что бы ни предоставления on и removeListener функции вы вызываете выше, это может обеспечить более простой способ сделать это (JQuery делает, но это не выглядит, как вы используете JQuery там).