Javascript: How to access a class attribute from a function within one of the class's functions

Question

Within my a certain function of a class, I need to use setInterval to break up the execution of the code. However, within the setInterval function, "this" no longer refers to the class "myObject." How can I access the variable "name" from within the setInterval function?

function myObject() {
    this.name = "the name";
}

myObject.prototype.getName = function() {
    return this.name;
}

myObject.prototype.test = function() {
    // this works
    alert(this.name);

    var intervalId = setInterval(function() {
        // this does not work
        alert(this.name);

        clearInterval(intervalId);
    },0);
}

Use of setInterval (esp. with a period of 0) is a bit odd. You only have it fire once anyway, why not use setTimeout which would make it simpler. — AnthonyWJones
– AnthonyWJones, Commented Jan 10, 2009 at 0:16

jacobangel · Accepted Answer · 2009-01-09 20:04:26Z

12

myObject.prototype.test = function() {
    // this works
    alert(this.name);
    var oThis = this;
    var intervalId = setInterval(function() {
        // this does not work
        alert(oThis.name);

        clearInterval(intervalId);
    },0);
}

This should work. The anonymous function's "this" is not the same "this" as your myObject's "this."

answered Jan 9, 2009 at 20:04

jacobangel

7,0262 gold badges37 silver badges35 bronze badges

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

5 Comments

sblundy Over a year ago

I tend toward 'self' but that's me

jacobangel Over a year ago

I actually prefer to use "superThis" but it didn't seem appropriate for an example :)

Luca Matteis Over a year ago

"self" is a reserved keyword in javascript, you should'nt use it.

Crescent Fresh Over a year ago

"self" is not a reserved word. It's just a special variable.

AnthonyWJones Over a year ago

I also use self, its a very recognisable idiom. It is true that browsers also place a self property on the window object, I can't think why, if I want to access the window I use window.

meouw · Accepted Answer · 2009-01-09 20:32:53Z

1

Here's the prototype bind function

Function.prototype.bind = function( obj ) {
    var _this = this;
    return function() {
        return _this.apply( obj, arguments );
    }
}

answered Jan 9, 2009 at 20:32

meouw

42.1k11 gold badges55 silver badges69 bronze badges

1 Comment

bobince Over a year ago

This implementation of Function.bind() does not support partial function application as proposed for ECMAScript Harmony, so may cause compatibility problems further down the line. You can still use it of course, just best call it something else if you want to bang it into the Function prototype.

jamesmillerio · Accepted Answer · 2009-01-09 20:05:44Z

0

This is what binding is for in Prototype:

function myObject() {
    this.name = "the name";
}

myObject.prototype.getName = function() {
    return this.name;
}

myObject.prototype.test = function() {
    // this works
    alert(this.name);

    var intervalId = setInterval(function() {
        // this does not work
        alert(this.name);

        clearInterval(intervalId);
    }.bind(this),0);
}

answered Jan 9, 2009 at 20:05

jamesmillerio

3,2345 gold badges28 silver badges32 bronze badges

2 Comments

Chris B Over a year ago

I'm not using the Prototype framework, but this would work otherwise.

jamesmillerio Over a year ago

My apologies! Seeing the prototype keyword throws me off sometimes.

Guss · Accepted Answer · 2009-01-09 22:43:11Z

0

Please note that s13james's answer is incomplete in that bind() is not a standard feature and must be provided elsewhere - one way is using the prototype.js Javascript framework, while another will be to do it yourself using meouw's code example.

If you don't use bind() (which is nifty, I must say) then djangel's response is what you could have done, and is what I most often do.

answered Jan 9, 2009 at 22:43

Guss

32.8k20 gold badges117 silver badges143 bronze badges

Collectives™ on Stack Overflow

Javascript: How to access a class attribute from a function within one of the class's functions

4 Answers 4

5 Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related