为什么对象属性在同一对象的另一个方法中未定义，而在另一个对象中未定义？

Question

好，所以我一直在努力尝试一些很简单的事情。不确定是Babel编译器还是什么。所以我上了这节课：

export default class animateFormClass {

    constructor(formSelector, buttonElement = null, currentCard = null, prevCard = null, nextCard = null) {
        this.form = document.querySelector(formSelector);
        this.direction = 'forward';
        this.progressBar = document.getElementById('progressbar');
        this.opacity = this.opacityLeft = 0;
        this.buttonElement = buttonElement;
        this.currentCard = currentCard;
        this.prevCard = prevCard;
        this.nextCard = nextCard;
    }

    animateForm() {
        if (this.direction === 'forward') {

            if (this.nextCard !== null) {
                this.fadeOut = setInterval(this.fadeOutAnimation, 10);
                this.updateProgressBar;
            }
        } else if (this.direction === 'back') {

            if (this.prevCard !== null) {
                this.fadeOut = setInterval(this.fadeOutAnimation, 10);
                this.updateProgressBar;
            }
        }

    }
    fadeOutAnimation() {
        this.opacity = this.opacity - 0.05;
        console.log(this.opacity, this.currentCard);
        if (this.opacity >= 0) {
            this.currentCard.style.opacity = this.opacity;
        } else {
            this.currentCard.classList.add('d-none');
            this.fadeIn = setInterval(this.fadeInAnimation, 10);
            clearInterval(this.fadeOut);
        }
    }

    fadeInAnimation() {
        this.opacityLeft = this.opacityLeft + 0.1;
        let cardElement;

        if (this.direction === 'forward') {
            cardElement = this.nextCard;
        } else if (this.direction === 'back') {
            cardElement = this.prevCard;
        }

        cardElement.classList.remove('d-none');

        if (this.opacityLeft <= 1) {
            cardElement.style.opacity = this.opacityLeft;
        } else {
            clearInterval(this.fadeIn);
        }
    }

    updateProgressBar() {
        let activeElement = this.progressBar.querySelector('.active');
        let nextListElement = activeElement.nextElementSibling;
        let prevListElement = activeElement.previousElementSibling;

        if (this.direction === 'forward') {
            if (nextListElement !== null) {
                activeElement.classList.remove('active');
                activeElement.classList.add('step-completed');
                nextListElement.classList.add('active');
            }
        } else if (this.direction === 'back') {
            if (prevListElement !== null) {
                activeElement.classList.remove('active');
                prevListElement.classList.remove('step-completed');
                prevListElement.classList.add('active');
            }
        }
    }
}

并且从另一个文件中，我像这样导入类：

import animateFormClass from './animateForm';

[好，所以在此文件中，我有一些代码可以更新某些对象的属性，但是在animateForm()方法中，当这些相同的对象属性被另一种称为fadeOutAnimation()的方法使用时，这些属性似乎还可以] [this.currentCard属性中有未定义的消息。

这是创建类实例的代码：

if (document.getElementById('register')) {
    let animate = new animateFormClass('#register');
    let currentCard, prevCard, nextCard;
    document.getElementById('register').addEventListener('click', function(e) {
        if (e.target.classList.contains('next')) {
            animate.direction = 'forward';
            animate.currentCard = e.target.closest('fieldset');
            animate.nextCard = animate.currentCard.nextElementSibling;
            animate.animateForm();
        } else if (e.target.classList.contains('prev')) {
            animate.direction = 'back';
            animate.animateForm(e.target);
        }
    });
}

当调用animate.animateForm()方法时出现错误。我的环境正在使用Laravel并使用Laravel开箱即用的watch任务在PHP Web应用程序上工作。

编辑：

谢谢您的帮助，我已经解决了。如果有人想知道，我将类的所有方法都更改为属性，并使用了箭头函数语法。所以再次感谢！！

好，所以我一直在努力尝试一些很简单的事情。不确定是Babel编译器还是什么。因此，我有了此类：导出默认类animateFormClass {构造函数（...

Answer 1

[当您执行setInterval（this.fadeOutAnimation，10）时，'fadeOutAnimation'内部的'this'被窗口绑定。使用setInterval（（）=> {this.fadeOutAnimation（）}，10）;它保留了“ this”上下文。

Answer 2

谢谢您的帮助，我已经解决了。如果有人想知道，我将类的所有方法都更改为属性，并使用了箭头函数语法。所以再次感谢！！

这是新代码：