Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaScript Scope question

As someone who is attempting to take a more object oriented approach to my javascript programming I've hit a stumbling block which I'm sure is probably something very basic, but, take the following object implementation (assume that the jQuery object is available to this code):

function Foo()
{
    this.someProperty = 5;
}

Foo.prototype.myFunc = function()
{
    //do stuff...
};

Foo.prototype.bar = function()
{
    //here 'this' refers to the object Foo
    console.log(this.someProperty);

    $('.some_elements').each(function()
    {
        //but here, 'this' refers to the current DOM element of the list of elements
        //selected by the jQuery selector that jquery's each() function is iterating through
        console.log(this);

        //so, how can i access the Foo object's properties from here so i can do
        //something like this?
        this.myFunc();
    });
};
like image 594
Bill Dami Avatar asked Sep 08 '10 17:09

Bill Dami


2 Answers

You can temporarily use another variable to point to the correct this:

Foo.prototype.bar = function()
{
    //here 'this' refers to the object Foo
    console.log(this.someProperty);

    var self = this;

    $('.some_elements').each(function()
    {
        self.myFunc();
    });
};
like image 178
slebetman Avatar answered Nov 02 '22 19:11

slebetman


Before you enter the function you pass to each, you need to capture this of the outer function in a variable and then use the variable inside of the function that you pass to each.

function Foo()
{
    this.someProperty = 5;
}

Foo.prototype.myFunc = function()
{
    //do stuff...
};

Foo.prototype.bar = function()
{
    // in here, this refers to object Foo

    // capture this in a variable
    var that = this;

    $('.some_elements').each(function()
    {
        // in here, this refers to an item in the jQuery object
        // for the current iteration   

        console.log(that);
        that.myFunc();
    });
};

As you've found out, this inside of the function that you pass to each refers to the current item in the jQuery object on each iteration i.e. first iteration refers to item at property 0, second iteration refers to item at property 1, etc.

like image 28
Russ Cam Avatar answered Nov 02 '22 21:11

Russ Cam