применение this в javascript [дубликат]

173

23 ноября 2018, 13:20

На данный вопрос уже ответили:

Потеря контекста вызова 5 ответов

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;
  }
}

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

не знаю, как работает первый this.input, передаёт объекту, для которого используется конструктор что?
при изменении объекта делает что? тоже не понимаю
функцию onChange не понимаю всю
задавая этот вопрос понял, что не могу найти нигде понятного мне применения или объяснения применения методов типа input и onchange

Answer 1

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" />

Answer 2

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