Access values of object from within a javascript closure

Question

I can't get how to access that value, this is my code:

function Filters()
{
    this.filters = ["filter_1", "filter_2", "filter_3"];
    this.someData = "test";
    this.draw = draw;
    function draw(){
        for(var i=0; i<this.filters.length;i++)
        {
            var filter = this.filters[i];
            $("#" + filter).click(function(){
                doSomething();
            });
        }
    }
    function doSomething(){
        alert(this.someData);
    }
}

I am aware of the fact that since doSomething() is called from within the closure, this. will refer a JQuery object being worked on. So how do I go about being able to use someData from my object in that function/closure ? Can't seem to figure it out.
Thanks for help :)

No. It would be the jQuery object if you did .click(doSomething). Currently it's nothing (or the global object). — Bergi
– Bergi, Commented Sep 24, 2013 at 16:28
Daniel, Filters() is a constructor, written to be called with new Filters(). As written the constructor will behave very differently if called without new. To understand the issues here, and to learn how to write constructors that are tolerant of a missing new, try this, by John Resig. It's fairly heavyweight stuff but worth persisting with. — Beetroot-Beetroot
– Beetroot-Beetroot, Commented Sep 26, 2013 at 3:24
You probably also need to read Douglas Crockford's Private Members in JavaScript. — Beetroot-Beetroot
– Beetroot-Beetroot, Commented Sep 26, 2013 at 3:30
@Beetroot-Beetroot : yeah I know it is a constructor, I intended to write a class, with parameters passed to the constructor etc. I have cut all that out and left only what I considered relevant. I will have a read through the articles you have linked, thanks :) — Daniel Gruszczyk
– Daniel Gruszczyk, Commented Sep 26, 2013 at 9:16
Daniel, sorry I didn't mean to lecture you on what you already know. Between them, those two articles will teach you lots about javascript. I wish they had been available 15 years earlier when I started the JS strand of my career. — Beetroot-Beetroot
– Beetroot-Beetroot, Commented Sep 26, 2013 at 16:13

bfavaretto · Accepted Answer · 2013-09-24 16:17:07Z

1

No, this inside doSomething will be the global object. You need to keep a reference to this in a separate variable:

function Filters()
{
    var that = this; // reference to this
    this.filters = ["filter_1", "filter_2", "filter_3"];
    this.someData = "test";
    this.draw = draw;
    function draw(){
        for(var i=0; i<this.filters.length;i++)
        {
            var filter = this.filters[i];
            $("#" + filter).click(function(){
                doSomething();
            });
        }
    }
    function doSomething(){
        alert(that.someData);
    }
}

Unrelated to your problem: you could also pass a reference to doSomething as the event listener, instead of wrapping it in another function:

$("#" + filter).click(doSomething);

edited Sep 24, 2013 at 16:17

answered Sep 24, 2013 at 16:09

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

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

Collectives™ on Stack Overflow

Access values of object from within a javascript closure

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