применение this в javascript

Question

class dateInput {
  constructor() {
    this.input = document.querySelector(".input");

    /* присваивает передаваемому в конструктор объекту .input?? = 
       выбирает первый элемент с классом .input в документе*/

    this.input.onChange = this.onChange;
  }
  onChange(event) {
    this.inputValue = event.srcElement.value;
    this.updateTime = new Date();
    return this.inputValue;
  }
}

Хотел узнать, как работает код выше, разобрался, но пока не совсем точно, в коде есть мои комментарии, вот мои вопросы:

1. не знаю, как работает первый this.input, передаёт объекту, для которого используется конструктор что?

2. при изменении объекта делает что? тоже не понимаю

3. функцию onChange не понимаю всю

4. задавая этот вопрос понял, что не могу найти нигде понятного мне применения или объяснения применения методов типа input и onchange

Answer 1

1. Конструктор передает начальные значения для переменных класса. В этом коде не хватает инициализации переменной input
2. При изменении input срабатывает функция onChange(), причем не стандартная, а та, которая прописана внутри класса, а делает она вот что:
   1. В переменную inputValue (которую, кстати, тоже нужно предварительно инициализировать) записывается текущий event.target
   2. В переменную updateTime (и ее нужно проинициализировать) записывается текущее время
   3. Результатом работы функции является значение переменной inputValue
3. input - это не метод, а Node-объект. Конкретно этот код и мне не понятен, для чего может пригодиться, но вообще подобные конструкции применяются для создания api к каким-нибудь библиотекам, чтобы иметь возможность манипулировать состоянием работы библиотеки на основании пользовательских событий или событий работы библиотеки.

Answer 2

class dateInput {
  constructor() {
    /* выбирает первый элемент с классом .input в документе */
    this.input = document.querySelector(".input");
    this.input.onchange = this.onChange.bind(this); // not this.input.onChange
  }
  onChange(event) {
    // теперь (после добавления .bind(this) в конструкторе) this здесь -
    // объект типа dateInput, чей метод используется в качестве обработчика
    this.inputValue = event.srcElement.value;
    this.updateTime = new Date();
    //return this.inputValue; - meaningless
console.log(this);

}
}
var a = new dateInput();
console.log(a);

<input class="input" />