Блог

У меня есть следующие коды:

 class Autocomplete {
  constructor(ele, options) {
    this.ele = ele;
    this.options = options;
    this.input = this.ele.querySelector('.input');
    // with keyup we want to fire it right away
    // this.input.addEventListener('keyup', (e) => this.display(e);
  }
}
 

Затем display функция отобразит вводимые пользователем данные на странице. Однако мне интересно, в чем разница между этими 3 функциями:

1)

 this.input.addEventListener('keyup', (e) => this.display(e));
 

 this.input.addEventListener('keyup', this.display);
 

 this.input.addEventListener('keyup', () => this.display());
 

Работают только функции 1 и 2, и, насколько я понимаю, функция 1 будет помещена e в качестве аргумента в display функцию, тогда как функция 2 будет выполняться немедленно keyup . Однако для 3, почему это не работает, потому что я думал e , что аргумент передается неявно API DOM?

Из первых 2 функций какая из них более эффективна и почему?

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