Quirk while calling a method inside another object in javascript

Question

There is an error in the last line of the code stating :

Uncaught TypeError: Cannot read property 'removeClass' of undefined

why it is that there is no error in last-2nd and last-3rd line, but in the last-line? What's going on here?

var scrolling = {
    a : 9,
    b: 1,
    z: [0,1],
    $headerComponent : $(".header-wrapper"),

    funcInEvent1: function() {
        this.$headerComponent.removeClass("duringScroll-header");
    },
    rough: function(){
        var a = this.z; 
        console.log(a);
    }
};

$(window).on("scroll", function(){
    console.log(scrolling.$headerComponent); // <----- NO ERROR (object)
    scrolling.rough(); //<----- NO ERROR ( [0,1] );
    window.setTimeout(scrolling.funcInEvent1, 300); //<------ ERROR
}

The quirk will be fixed if i replace this with scrolling in the 8th line.

    funcInEvent1: function() {
        scrolling.$headerComponent.removeClass("duringScroll-header");
    },

The problem is not with the last line, it's that either `this.$headerComponent` or `scrolling.$navButton` is `undefined` — Federico klez Culloca, Dec 01 '17 at 10:21
i edited and omitted the line of "scrolling.$navButton" because the issue is with this.$headerCompnent... — Jake, Dec 01 '17 at 10:25
`this` inside an anonymous function is not what expect. keep using a separate variable or arrow functions. — André Werlang, Dec 01 '17 at 10:52

score 0 · Accepted Answer · answered Dec 01 '17 at 10:34

0

Wrap the call to scrolling.funcInEvent1 in an anonymous function :

$(window).on("scroll", function () {
    console.log(scrolling.$headerComponent);
    scrolling.rough();
    window.setTimeout( function() {
        scrolling.funcInEvent1();
    }, 300);
});

answered Dec 01 '17 at 10:34

Joulss

1,040
1
14
26

Ok But even if i do that, what's the logic behind that?? I am concerned completely with what's actually happening, what my piece of code is not working, and why wrapping the call (like u said) will work? – Jake Dec 01 '17 at 10:47
Check this out : https://stackoverflow.com/questions/43945702/why-do-i-have-to-wrap-functions-in-settimeout – Joulss Dec 01 '17 at 14:38

Quirk while calling a method inside another object in javascript

1 Answers1