Javascript scope issues when binding

Question

I know there are sooo many similar questions on stack regarding this issue, but for the life of me I cannot understand what the problem is in my code.

Trying to level up in javascript so any advise would be helpful. I have created an object to manage slider functions.

    var gMapSlider = {
        mapSlideShow: false,
        // why doesnt current place update when passed in
        newMarker: null,
        oldMarker: null,
        mapSlideIn: function() {
            this.contentSlide
            $('#placeDetails').animate({right: '0'});
            this.mapSlideShow = true;
        },
        mapSlideOut: function(func) {
            if (typeof(func) != "function") func = function() {};
            $('#placeDetails').animate({right: '-320px'}, null, null, func());
            this.mapSlideShow = false;
        },

        mapSlideToggle: function() {
            (this.mapSlideShow) ? this.mapSlideOut() : this.mapSlideIn();
        },

        contentSlide: function() {
            if (this.newMarker) $('h1', '#placeDetails').text(this.newMarker.title);
        },

        mapSlide: function(marker) {
            this.newMarker = marker;
            if (this.oldMarker === this.newMarker) { //same marker showing
                this.mapSlideToggle();
            }
            else if (this.oldMarker !== this.newMarker && !this.mapSlideShow) { //diff marker showing
                this.contentSlide(marker);
                this.mapSlideIn();
            }
            else if (this.oldMarker !== this.newMarker && this.mapSlideShow)   {
                var self = this;
                console.log(self) //returns this object
                this.mapSlideOut(function() {
                    console.log(self); // returns this object
                    self.contentSlide(this.newMarker);
                    self.mapSlideIn;
                }).bind(self); // cannot read property 'bind' of undefined
            } 
            this.oldMarker = this.newMarker;
        }
    }

A couple of questions

1) The problem is with my gMapSlider.mapSlide function. If I call the mapSlide function and the last else if statement applies I get a cannot read property of bind error. I have Google'd but found nothing of any real relevance. Can anyone help with what I am doing wrong here.

2) Is this the best way of managing functions within a namespace. Most code samples I see use functions in the global namespace so wanted a bit of clarification if it is advised to create objects like this in Javascript?

EDIT @torazaburo Thanks, feel like a proper Newbie, that was the issue. Put it as an answer and I will put as solved. Any advice on code architecture?

You're binding the result of calling mapSlideOut, whereas I imagine you are trying to bind the function being passed to it. In other words, you've misplaced a right parenthesis. — user663031
– user663031, Commented Dec 9, 2015 at 10:26

Ramanlfc · Accepted Answer · 2015-12-09 10:36:07Z

1

 this.mapSlideOut(function() {
                    console.log(self); // returns this object
                    self.contentSlide(this.newMarker);
                    this.mapSlideIn;
                }).bind(self);

bind() should be called on a function object but you'r calling it on the result of a function call

use this:

 this.mapSlideOut.bind(self,function() {
                    console.log(this); // returns this object
                    this.contentSlide(this.newMarker);
                    this.mapSlideIn;
                });

also the above call will return you a reference to the function with this bound to self

answered Dec 9, 2015 at 10:36

Ramanlfc

8,3541 gold badge21 silver badges24 bronze badges

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

Collectives™ on Stack Overflow

Javascript scope issues when binding

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