Почему в классе es6 получаю ошибку this.method is not a function?

Question

[dmitriu256]

Почему получаю следующую ошибку?

this.validatePhone is not a function at HTMLInputElement.formValidate

Мой класс

class Validation {
    constructor() {}

    //Validation Form
    formValidate() {

        let names = this.name;
        let check;
        switch (names) {
            case 'name':
                check = /^[А-Яа-яЁёA-Za-z]{3,11}$/.test(this.value);
                break;

            case 'email':
                check = /^[a-zA-Z._-]+\d*@[a-z]+?\.[a-z]{2,3}$/.test(this.value);
                break;

            case 'phone':
                check =  this.validatePhone(this.value); //до реализации на классах был вид validatePhone(this.value) - и все работало
                break;

            //Необязательное поле, может оставаться пустым
            case 'message':
                check = true;
                break;

            default:
                check = false;
        }

        //Проверка валидации
        if (check) {
            this.style.border = '2px solid green';

        } else {
            this.style.border = '2px solid red';
            this.value = '';
        }
    }
    //END Validation Form

    //Phone Validation
    validatePhone(val) {

        let massCode = [67, 96, 97, 98, 50, 66, 95, 99, 63, 73, 93, 91, 92, 94];

        let resCode = massCode.map(function (i) {
            return '0' + i;
        });

        let str = resCode.join('|');

        let reg = new RegExp("/\\+38\\(" + str + "\\)\\-(\d{3})\\-(\d{2})\\-(\d{2})/");

        if (reg.test(val)) {
            return true;
        } else {
            return false;
        }
    }
    //END Phone Validation
}

Вызов класса в главном скрипте

//Обход всех элементов формы
 let validation = new Validation();

        for (let i = 0; i < form.elements.length; i++) {
            if(form.elements[i].type !== 'submit'){
                form.elements[i].setAttribute('required', 'required');
                form.elements[i].addEventListener('blur', validation.formValidate);
            }
        }

Пример простого класса, в котором реализовано подобное поведение, но ошибки не возникает

class Convertor {
    constructor(baseCurrencyBuy, baseCurrencySale) {
        this._baseCurrencyBuy = baseCurrencyBuy;
        this._baseCurrencySale = baseCurrencySale;
    }

    roundToDecimal(amount) { //аналогия this.validatePhone(this.value)
        return Math.round(100 * amount)/100;
    }

    fromTo(currency) {
        return this.roundToDecimal(currency * this._baseCurrencyBuy); //все отлично отрабатывает
    }

    toFrom(currency) {
        return this.roundToDecimal(currency / this._baseCurrencySale );
    }
}

Answer 1

[Александр Черемхин]

у вас в методе валидации попытка использовать два контекста.
один указывает на input - this.value , другой на клас - this.validatePhone, так не пойдет)
измените код чтобы this указывал на класс

formValidate(e) {
        const el = e.target; // элемент на котором произошло событие 
        const { value, name} = el; // значение и имя элемента 
        switch(name){
            case ‘phone’:  ... this.validatePhone(value) ...
        ...
        }
}

при вызове для сохранения контекста на класс, используйте стрелочную функцию

form.elements[i].addEventListener('blur', e=> validation.formValidate(e));

Comments

[dmitriu256]

Спасибо огромное за объяснение!

Answer 2

[Alex]

Потому что при такой конструкции

form.elements[i].addEventListener('blur', validation.formValidate);

контекст меняется.

В таких случаях — открывайте отладчик и смотрите на что указывает this в месте где возникает ошибка

Чтобы контекст не менялся, нужно сделать примерно так:

form.elements[i].addEventListener('blur', validation.formValidate.bind(validation));

Comments

[dmitriu256]

Привязал контекст явно к элементам формы form.elements[i]
form.elements[i].addEventListener('blur', validation.formValidate.bind(form.elements[i]));

В this получаю

<input type="tel" class="form__input" id="contacts-phone" name="phone" placeholder="Введите номер телефона" required="required">

Фрагмент метода validatePhone(val)

//v1
 case 'phone':
                console.log(this); //попадает нужный input
                check =  this.validatePhone.bind(this.value);//ошибка
                break;
//v2
 case 'phone':
                console.log(this);  //попадает нужный input
                check =  this.validatePhone.bind(this.value); //ошибка
                break;
//v3
 case 'phone':
                console.log(this); //попадает нужный input
                check =  this.validatePhone(this.value);//ошибка
                break;

Все остальные case метода formValidate() отрабатывают отлично (кроме case:phone)
(//v1-3 что пытался менять) результат не изменился.

[dmitriu256]

Максим Зайцев, пробовал результат негативный.
В main.js

form.elements[i].addEventListener('blur', validation.formValidate);

В классе в методе formValidate()

case 'phone':
                console.log(this); //попадает нужный input
                check =  this.validatePhone(this);//ошибка
                break;

[dmitriu256]

Максим Зайцев,

Код проекта
Выложил участок кода а также версию, до того как стал переводить весь код на классы.
В таком виде полностью работает, а вот на классах выдает описанные ошибки. Буду благодарен за помощь!

[Александр Черемхин]

или можно использовать стрелочную функцию для сохранения контекста.

form.elements[i].addEventListener('blur', ()=> validation.formValidate());