Выводит undefined вместо массива в классе

Question

Есть класс. Есть массив в нем с числами. При клике на кнопку должен выводится весь массив. Вместо этого выводит undefined. Почему так?

class AddProduct {
    elementSelectors = {
        containerClassSelector: '.container',
        addProductButtonClassSelector: '.add-product-button',
    };

    products = [1, 2, 3, 4, 5];

    constructor () {
        this.bindEvents();
    }

    addProduct() {
        console.log(this.products);
        //выводит undefined
    }

    bindEvents() {
        document.querySelector(this.elementSelectors.addProductButtonClassSelector).addEventListener('click', this.addProduct);
    }
}

new AddProduct();

Answer 1

Не надо рассчитывать на установку this при вызове функций обратного вызова.

The value of "this" within the handler:

When attaching a handler function to an element using addEventListener(), the value of this inside the handler will be a reference to the element.

То есть, this при вызове метода addProduct указывает на кнопку, которую нажал пользователь. Это явно не то что вам нужно.

Было:

document.querySelector(
    this.elementSelectors.addProductButtonClassSelector
).addEventListener('click', this.addProduct);

Стало:

document.querySelector(
    this.elementSelectors.addProductButtonClassSelector
).addEventListener('click', () => this.addProduct());

БЛОГ НА HUSL

Выводит undefined вместо массива в классе

Ответы (1 шт):