Accessing "this" Type JavaScript Variables From Other Functions

Question

I have an event firing and even though it's inside of the function from which I'm trying to access variables, I get Uncaught TypeError: Cannot read property '...' of undefined. So, let's say:

( function($) {

    $.fn.main = function() {

        this.setting = 1;

        $("#someElement").scroll( function() {

            console.debug(this.setting);

        } );

    }

} )(jQuery);

I'm sure it has something to do with timing, but then again, I could be wrong. Should I make a copy of this and make that public? Anyone? Thanks.

Peter Aron Zentai · Accepted Answer · 2012-04-12T12:48:07.097

3

The value of this cannot be pinned in a closure as the this gets its value dynamically.

try :

var self = this;

And reference self.

edited Apr 12 '12 at 12:48

answered Apr 12 '12 at 08:52

Peter Aron Zentai

11,482
5
41
71

I like your simplicity, though you all got it right. Thanks. Definitely what I thought. – Gabriel Ryan Nahmias Apr 12 '12 at 09:05

score 1 · Answer 2 · answered Apr 12 '12 at 08:52

Just copy this to another variable

( function($) {

    $.fn.main = function() {

        this.setting = 1;
        var that = this;
        $("#someElement").scroll( function() {

            console.debug(that.setting);

        } );

    }

} )(jQuery);

score 0 · Answer 3 · answered Apr 12 '12 at 08:55

( function($) {

    $.fn.main = function() {

        this.setting = 1; // "this" refers to the "$.fn.main" object

        $("#someElement").scroll( function() {

            console.debug(this.setting); // "this" refers to the "$('#someElement')" object

        } );

    }

} )(jQuery);

If you want to use the this from $.fn.main, you can store the variable. The following would work:

( function($) {

    $.fn.main = function() {

        var that = this

        that.setting = 1; // "this.setting" would also work

        $("#someElement").scroll( function() {

            console.debug(that.setting); // You need to reference to the other "this"

        } );

    }

} )(jQuery);

score 0 · Answer 4 · edited Apr 12 '12 at 12:02

0

the this inside the scroll method is refereing to the scroll method. The method is bound to be called on the scroll event of element with id 'someElement'. and the scope of the binding object is lost.

edited Apr 12 '12 at 12:02

Peter Aron Zentai

11,482
5
41
71

answered Apr 12 '12 at 09:18

Satish N Ramteare

197
1
9

Accessing "this" Type JavaScript Variables From Other Functions

4 Answers4

Linked