0

how do I access the this keyword in ES6 Modules/Classes? For example in the below, $(this) points to WaypointController whereas with the old style code it would have referred to the selected element.
I tried using arguments but it doesn't help.

export default class WaypointContoller {
    constructor() {
        this.WAYPOINT_CLASS = 'main .webzone-wrapper:not(.no-csstransitions) > div';
        this.ANIMATION_CLASS = isIE9() ? 'fadeInUpNoAnimation' : 'fadeInUp';
        this.OFFSET = '90%';
        this.doAnimations(this.WAYPOINT_CLASS, this.ANIMATION_CLASS);
    }

    doAnimations(waypointClass, animationClass) {
        let delayTime;
        const waypoint = new Waypoint({ // eslint-disable-line no-undef
            element: document.querySelector(waypointClass),
            handler: () => {
                delayTime += 100;
                $(this).delay(delayTime).queue((next) => {
                    $(this).toggleClass('animated');
                    $(this).toggleClass(animationClass);
                    delayTime = 0;
                    next();
                });
            },
            offset: this.OFFSET,
            triggerOnce: true,
        });
        console.log(waypoint);
    }

    static init() {
        $(document).ready(() => {
            new WaypointContoller(); // eslint-disable-line no-new
        });
    }
}
rory
  • 1,490
  • 3
  • 22
  • 50
  • 1
    Define your handler as `function() {}` instead of arrow function. – Martin Adámek Sep 26 '18 at 13:53
  • 1
    This has nothing to do with using `class`es or ES6 modules, just with the arrow function syntax. Don't use it if you need dynamic `this` (although you haven't shown us how the handler is called) – Bergi Sep 26 '18 at 14:04
  • "*eslint-disable-line no-new*" - don't suppress the warning, eslint is right here. Don't use a `class` if you don't want to do anything with the instance. – Bergi Sep 26 '18 at 14:06
  • @MartinAdámek can you please add this as an answer so I can mark as correct? – rory Sep 26 '18 at 14:38
  • 1
    It was marked as duplicate already - so no possibility to add answers. – Martin Adámek Sep 26 '18 at 14:45

0 Answers0