Почему не получается вызвать метод внутри другого метода в JavaScript?

Question

[MaxYenot]

Здравствуйте. Разбираюсь с функциями-конструкторами на Javascript.
Пишу небольшое приложение, которое просит ввести перевод.
Конструктор function SpellingTask(task, correct){} принимает два параметра - массивы task, correct.
Метод .ask() создает элементы формы, лейбла, кнопок и прикрепляет к body
Еще этот метод вызывает другой метод - .check(), который и должен проверять правильность введенного ответа.
Но не работает почему-то.Консоль Гугл Хрома выдает ошибку
Uncaught TypeError: this.check is not a function
at HTMLButtonElement. (spellingClass.html:43)

function SpellingTask(task, correct){
		this.counter = 0;
		this.task = task;
		this.correct = correct;
		this.userAnswer = "";
		this.check = function(){
			if(this.userAnswer === this.correct[this.counter]){
				console.log("Молодец");
				this.counter++;
				if(this.counter >= this.task.length){
					console.log("На этом спеллинг закончен. Тут можно вызвать другую функцию");
				}else{
					this.ask();
				}
			}else{
				this.ask();
			}
		};
		this.ask = function(){
			/*userAnswer = prompt("Напиши перевод слова '" + taskSpellingTask[taskSpellingCounter] + "'");*/
			var inputDiv = document.createElement("div");
				inputDiv.setAttribute("id", "inputDiv");
			var label = document.createElement("label");
				label.setAttribute("for", "inp");
				label.textContent = "Напиши перевод слова '" + this.task[this.counter] + "'";
			var input = document.createElement("input");
				input.setAttribute("id", "inp");
			var submit = document.createElement("button");
				submit.textContent = "Проверить";
				submit.addEventListener("click", function(){
					this.userAnswer = input.value;
					document.body.removeChild(inputDiv);
					this.check();
				});

			inputDiv.appendChild(label);
			inputDiv.appendChild(input);
			inputDiv.appendChild(submit);
			document.body.appendChild(inputDiv);

	tasks = [];
	tasks.push(new SpellingTask(['привет', 'до свидания'],['hello','good bye']))
	var task1 = new SpellingTask(['привет', 'до свидания'],['hello','good bye'])

Comments

[Антон Спирин]

Теряете контекст. Хандлер, передаваемый в слушатель клика submit, вызывается в другом месте и с другим контекстом.

Answer 1

[0x3a]

submit.addEventListener("click", function(){}); замени на стрелочную функцию ()=>{}, и тогда контекст останется. Или можно использовать метод bind для указания контекста, иначе он будет браться по умолчанию, в данном случае это HTMLButtonElement
PS: если использовать typescript, то эта ошибка была бы сразу видна.

Comments

[MaxYenot]

Спасибо! Как раз, видимо, пришло время изучить стрелочные функции.
То есть, получается, когда мы пишем

button.addEventListener("click", function(){
this.methodName();
})

он расценивает button как объект и ищет у него метод под названием methodName?

[0x3a]

MaxYenot, да.
Дополнительная информация:
на MDN
на js.ru