"this" points to window and not to my prototype function after a callback function

Question

i have this Prototype function

(function(window, undefined){
    function Waypoint (el, callback, offset){
        this.el = el;
        this.cb = callback;
        this.offset = offset || 0;
        window.optimizedScroll.add(this.passedWaypoint);
        //window.optimizedScroll.add(this.passedWaypoint.call(this)); doesn't work
    }

    Waypoint.prototype.passedWaypoint = function(){
        //if element passes a point execute the callback function
        //this.cb(); //undefined
        console.log(this);  //refers to window and not to my obj
    };

    window.Waypoint = Waypoint;

})(this); 

var myElement1 = new Waypoint("myElement", function(){
    console.log("i have traveled so far");
});

and this optimized scrolling from this page https://developer.mozilla.org/en-US/docs/Web/Events/resize (i only changed resize with scroll)

var optimizedScroll = (function(window, undefined) {
    var callbacks = [], running = false;
    // fired on resize event
    function scroll() {
        if (!running) {
            running = true;
            window.requestAnimationFrame(runCallbacks);
        }
    }
    // run the actual callbacks
    function runCallbacks() {
        callbacks.forEach(function(callback) {
            callback(); 
        });
        running = false; 
    }
    // adds callback to loop
    function addCallback(callback) {
        if (callback) {
            callbacks.push(callback);
        }
    }
    return {
        // public method to add additional callback
        add: function(callback) {
            if (!callbacks.length) {
                window.addEventListener('scroll', scroll);
            }
            addCallback(callback);
        }
    };
})(this);

the callback function gets executed when i scroll, but i have a problem with the small word "this". how can i achive that "this" refers to my obj and not to window. i played around with "call" but i didn't get it...

gregor

Possible duplicate of [How does the "this" keyword work?](http://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) — trincot, Feb 27 '16 at 09:29

score 0 · Answer 1 · answered Feb 27 '16 at 09:41

0

the comment of @MysterX is correct ;)

window.optimizedScroll.add(this.passedWaypoint.bind(this));

not "call" what i tried

THANK YOU!! ;)

answered Feb 27 '16 at 09:41

Gregor Voinov

1,674
4
22
41

"this" points to window and not to my prototype function after a callback function

1 Answers1