javascript passing this inside an object method

Question

this code works, but my question is I dont understand the purpose of var that = this. Why do I need to reference it like that to pass it to setInterval. I read about 'this' in http://www.sitepoint.com/what-is-this-in-javascript/, but it doesn't really answer my question

my JavaScript code

function spinClass(imageSource, height, width, forward, el){

this.src = imageSource;
this.spinFoward = forward;
this.element = document.getElementById(el);
this.height = height;
this.width = width;
this.d = 0;


var img = document.createElement("img");
img.setAttribute('src', this.src);
img.setAttribute('height', this.height);
img.setAttribute('width', this.width);

this.element.appendChild(img);

this.letSpin = function letSpin(){
    //alert(this.d);
    var that = this;
    img.style.transform = "rotate(" + this.d + "deg)";
    img.style.WebkitTransform= "rotate(" + this.d + "deg)";
    img.style.MozTransform= "rotate(" + this.d + "deg)";
    img.style.msTransform= "rotate(" + this.d + "deg)";
    img.style.OTransform= "rotate(" + this.d + "deg)";

    //alert(this.spinFoward);
    if (this.spinFoward == true){
        this.d++;
    }else{
        this.d--;
    }

    setInterval(function(){that.letSpin();}, 20);
};

}

Because this will be something else inside that closure. Assigning it to a variable makes it stay in scope when the closure executes. — Chad
– Chad, Commented Sep 19, 2013 at 4:15
@Chad but setInterval is inside the method. in sitepoint.com/what-is-this-in-javascript, the second example "callling a function". How come that 'this' is referencing window instead of the function — user308553
– user308553, Commented Sep 19, 2013 at 4:17
i dont think you need a var that = this; inside letSpin function — Moazzam Khan
– Moazzam Khan, Commented Sep 19, 2013 at 4:27
May be stackoverflow.com/a/14847402/1823389 could be a good read for you — Moazzam Khan
– Moazzam Khan, Commented Sep 19, 2013 at 4:29

Jonathan Lonowski · Accepted Answer · 2013-09-19 04:36:32Z

5

The value of the this keyword is tied to the function it's used within and to how that function was called.

That includes both letSpin() and the short, anonymous function being passed to setTimeout(). And, the anonymous function won't automatically inherit or share the this value from letSpin() just by its placement.

So, you have to either capture the value in a variable with another name.

var that = this;

Or, bind the function so it will use a particular value when it's called.

setTimeout(function(){
    this.letSpin();
}.bind(this), 20);

And, with bind, you can also pass the method without the anonymous function.

setTimeout(this.letSpin.bind(this), 20);

edited Sep 19, 2013 at 4:36

answered Sep 19, 2013 at 4:30

Jonathan Lonowski

124k35 gold badges203 silver badges202 bronze badges

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

2 Comments

user308553 Over a year ago

@JohnathanLonowski hi, I understand better now, but howcome in sitepoint.com/what-is-this-in-javascript the second example "calling a function". In there this refer to window instead of the function, even thought this is used inside the function

Jonathan Lonowski Over a year ago

@user308553 If a value for this isn't specified when the function is called, the default value may be the global object, which is window in browsers. Note: In strict mode, the default value is instead undefined.

user3362762 · Accepted Answer · 2014-12-06 16:32:42Z

Instantiate object with this function:

function newClass(klass) {
    var obj = new klass;

    $.map(obj, function(value, key) {
        if (typeof  value == "function") {
            obj[key] = value.bind(obj);
        }
    });

    return obj;
}

This will do automatic binding of all function, so you will get object in habitual OOP style, when methods inside objects has context of its object.

So you instantiate you objects not through the:

var obj = new spinClass();

But:

var obj = newClass(spinClass);

Collectives™ on Stack Overflow

javascript passing this inside an object method

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related