Trouble with JavaScript OOP

Question

I am currently learning about JavaScript object oriented programming and seem to have run into a problem I couldn't figure out by googling so I am gonna try stack-overflow though I rarely ask questions on forums.

Anyway, I ran into an error while playing with functions after trying to convert some old non OOP code into OOP code. Note there are probably more errors than just the one I am asking about so don't trust any of the code below. The error I am getting is an Uncaught TypeError: Cannot read property fadeInAnimations of undefined.

Also, all advice to improve this code is really appreciated.

let mainSection = {
    msTime : 0,

    fadeInAnimation : ((element, delayTime) => {
        $(element).delay(delayTime).fadeIn(1000)
    }),

    mainPageElements : [`.traninigTimes`, `.registration`, `.trainingFee`].forEach((element) => {
        this.fadeInAnimation.fadeInAnimations(element, this.msTime)
        this.msTime += 1000;
    })
};

You have function called fadeInAnimation, and are calling fadeInAnimations? But the error is telling you that if you are calling x.fadeInAnimations then x is undefined — chxzy
– chxzy, Commented Feb 4, 2019 at 15:40
Put simply, this.fadeInAnimation is undefined. Could you please provide a minimal reproducible example demonstrating the exact problem. — Jamiec
– Jamiec, Commented Feb 4, 2019 at 15:40
fadeInAnimation is a function, yet you're trying to use it as an object with a fadeInAnimations property? — user47589
– user47589, Commented Feb 4, 2019 at 15:40
shouldn't it be this.fadeInAnimations(element, this.msTime) ? — cptwonton
– cptwonton, Commented Feb 4, 2019 at 15:41
You don’t have a function object instance here, you only have a normal object you created yourself using object notation. Therefor, this likely points to the global window object - and that doesn’t have a method called fadeInAnimations. If you need to access the method from outside the context of this object, then that would be mainSection.fadeInAnimations — 04FS
– 04FS, Commented Feb 4, 2019 at 15:43

Bastian Hofmann · Accepted Answer · 2019-02-04 15:45:40Z

2

The this context is different in the forEach callback. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

In the callback this refers to the callback context.

let mainSection = {
    msTime : 0,

    fadeInAnimation : ((element, delayTime) => {
        $(element).delay(delayTime).fadeIn(1000)
    }),

    mainPageElements : [`.traninigTimes`, `.registration`, `.trainingFee`].forEach(((element) => {
        this.fadeInAnimation.fadeInAnimations(element, this.msTime)
        this.msTime += 1000;
    }).bind(this))
};

answered Feb 4, 2019 at 15:45

Bastian Hofmann

2,49521 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Trouble with JavaScript OOP

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related