How to access object from within listener function in JS

Question

I want to access foo.settings.debug object from inside the success listener of the require() function. I keep getting an undefined error and when I reference "this" it ends up referencing the ajax object. Please assist.

var foo = {

    info: {

        version: '0.0.1'

    },

    settings: {

        debug: true

    },

    require: function(script) {

        $.ajax({
            url: script,
            dataType: "script",
            async: false,
            success: function(){
                if(foo.settings.debug) console.log('loaded js file: ' + script);
            },
            error: function(){
                throw new Error("Could not load script " + script);
            }
        });

    }
}

Cymen · Accepted Answer · 2012-11-21 20:16:33Z

1

You need a reference to foo which is this inside of foo however this is going to be something else inside of your closure so you need to keep a reference to this like so:

require: function(script) {
        var self = this;
        $.ajax({
            url: script,
            dataType: "script",
            async: false,
            success: function(){
                if(self.settings.debug) console.log('loaded js file: ' + script);
            },
            error: function(){
                throw new Error("Could not load script " + script);
            }
        });

    }

answered Nov 21, 2012 at 20:16

Cymen

14.5k4 gold badges58 silver badges77 bronze badges

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

1 Comment

Freddie Over a year ago

brain fart - I was doing that but at the level above that inside the foo declaration. thanks for your help.

Mihai Stancu · Accepted Answer · 2012-11-21 20:14:36Z

1

Every function has its own this object context. The context can be changed by using apply or other such functions.

In this case by creating an anonymous function as a callback for success you are entering a new context. In order to access the previous context you need to define a variable inside the previous context (with a name that will not be overridden by argument names of the callback function).

var foo = {

    info: {

        version: '0.0.1'

    },

    settings: {

        debug: true

    },

    require: function(script) {
        /* every function has its own 'this' context */
        var self = this;

        $.ajax({
            url: script,
            dataType: "script",
            async: false,
            success: function(){
                if(self.settings.debug) console.log('loaded js file: ' + script);
            },
            error: function(){
                throw new Error("Could not load script " + script);
            }
        });

    }
}

answered Nov 21, 2012 at 20:14

Mihai Stancu

16.2k2 gold badges35 silver badges51 bronze badges

2 Comments

Cymen Over a year ago

Tiny bug: self.settings.debug not self.debug

Mihai Stancu Over a year ago

Yes indeed, I initially wrote self.settings.debug but thought that require is defined in foo.settings.require meaning that it would be attached to foo.require. My mistake, require is defined in foo.require and attached to foo.

Collectives™ on Stack Overflow

How to access object from within listener function in JS

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related