Javascript class scope

Question

I am unable to call this.RenderDeals() from inside my Post.success function. I assume this has something to do with scope? Could someone shed some light on the issue, and possibly suggest a workaround. I have tried using prototype and module pattern, both without any luck.

FYI Post is an $.ajax wrapper that returns a jQuery Deferred object.

    function Deals() {
        this.template = '#trTemplate';
        this.container = '#containerTable';
        this.GetDeals = function () {
            Post('Deal.svc/GetDeals')
            .success(function (result) {
                this.RenderDeals(result);
            });
        };
        this.RenderDeals = function (deals) {
            $(this.template).tmpl(deals).appendTo(this.container);
        }
    }


    var deal = new Deals();
    deal.GetDeals();

UPDATE:

Ok, so I added the following line just above the GetDeals function:

var me = this;

and instead call

me.RenderDeals(result);

Appears to work correctly, but I'm not sure why.

That works because you've defined 'me' and then used it. But using 'this' directly is going to give you an instance of something else, because you're in a different context/scope. — Kon
– Kon, Commented Mar 18, 2011 at 23:56
just an FYI thing, in javascript idioms, a function starting with a capital means it is a constructor function. Not a problem or anything, but it just looks odd to someone who is a javascript guy but not a .net guy — Matt Briggs
– Matt Briggs, Commented Mar 18, 2011 at 23:56

Pointy · Accepted Answer · 2011-03-18 23:52:15Z

5

The this reference in your "success" function almost certainly isn't what you think it is. Try this change:

function Deals() {
    var instance = this;

    this.template = '#trTemplate';
    this.container = '#containerTable';
    this.GetDeals = function () {
        Post('Deal.svc/GetDeals')
        .success(function (result) {
            instance.RenderDeals(result);
        });
    };
    this.RenderDeals = function (deals) {
        $(this.template).tmpl(deals).appendTo(this.container);
    }
}

By stashing a reference to this in the "instance" variable, your handler will have a guaranteed way of getting back to the relevant instance when calling the other function ("RenderDeals").

answered Mar 18, 2011 at 23:52

Pointy

415k62 gold badges600 silver badges632 bronze badges

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

Comments

Hersheezy · Accepted Answer · 2011-03-19 00:03:19Z

2

Firstly, there are no classes in javascript, only objects. This may sound strange, but you can still do OOP without them in javascript :) I suggest you read up on this.

You are correct about the scope issue, the this keyword has some strange behavior. Read this for some more info.

Look into using the prototype attribute of any function object. I prefer to do my javascript OOP in the following fashion:

function Deals(){
    //this is your constructor
    var me = this;
    //this way you can avoid having to search the DOM every time you want to reference
    //your jquery objects.
    me.template = $('#trTemplate');
    me.container = $('#containerTable');
}
Deals.prototype.getDeals = function(){
    var me = this;
    Post('Deal.svc/GetDeals')
    .success(function (result) {
        me.RenderDeals(result);
    })
}
Deals.prototype.renderDeals = function(){
    var me = this;
     me.template.tmpl(deals).appendTo(me.container);
}

By declaring var me = this; at the top of each prototype function, you create a closure that refers to the object of interest, even inside of a callback :)

answered Mar 19, 2011 at 0:03

Hersheezy

1,2341 gold badge11 silver badges17 bronze badges

2 Comments

Hersheezy Over a year ago

Oh yes, forgot to mention that you would use the Deals object like this: var deals = new Deals(); deals.renderDeals();

Jamie Carruthers Over a year ago

Thanks for the alternative pattern. To be honest, I don't know if I really need to be doing any of this. I'm never going need many instances of the object, I was just trying to encapsulate a particular piece of my pages functionality to make it cleaner and more manageable.

Kon · Accepted Answer · 2011-03-18 23:51:00Z

0

Why not define RenderDeals() outside of Deals()?

    function RenderDeals(dealsObj, dealsData) {
        $(dealsObj.template).tmpl(dealsData).appendTo(dealsObj.container);
    }

Then instead of this:

this.RenderDeals(result);

Do this:

RenderDeals(this, result);

answered Mar 18, 2011 at 23:51

Kon

27.5k12 gold badges64 silver badges87 bronze badges

3 Comments

Jamie Carruthers Over a year ago

Because I am trying to encapsulate the functionality in a single class.

Pointy Over a year ago

Maybe he doesn't want it to be globally visible?

Kon Over a year ago

Sorry, that wasn't obvious because it wasn't specified in the question.

Adam · Accepted Answer · 2011-03-18 23:51:55Z

0

Try this:

var Deals = {
    template: $('#trTemplate'),
    container: $('#containerTable'),
    init: function (){
        return Deals;
    }
    GetDeals: function () {
        Post('Deal.svc/GetDeals')
        .success(function (result) {
            Deals.RenderDeals(result);
        })
    },
    RenderDeals = function (deals) {
        Deals.template.tmpl(deals).appendTo(Deals.container);
    }
}

var deal = Deals.init();
deal.GetDeals();

answered Mar 18, 2011 at 23:51

Adam

12.7k9 gold badges41 silver badges46 bronze badges

2 Comments

Pointy Over a year ago

Maybe he really wants to be able to construct many of these instances.

Matt Briggs Over a year ago

this will work, but imo pointy has a better answer by using a closure to capture the value of this.

Matt Briggs · Accepted Answer · 2011-03-19 00:03:17Z

You are right, it is a scoping issue. Pointy has the right answer, but I thought I could fill in a bit of what is going on.

this in javascript is an implicit variable that is set to whatever the function is attached to by default (or the global object if it isn't attached to anything). When you pass your function as a param into Post#success, it is not attached to any instance, let alone the current instance of Deals.

Pointy has the best answer here, what he is doing is creating an explicit variable that captures the implicit variable of this of deals. One of the coolest features of javascript is that everything that is in scope of a function definition will also be in scope for a function invocation, so by making that variable, you are able to access it again later, whenever and however that anonymous function is called.

Collectives™ on Stack Overflow

Javascript class scope

5 Answers 5

Comments

2 Comments

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related