JavaScript忘记了this.something变量

Question

I have in JavaScript class (function) with variable this.foo and function this.bar(), this.bar() I call in interval but have a small problem, JavaScript forgets this.foo and i cant use this.foo in this.bar(). Why?

function Somethink(element) {
    this.foo = element;

    this.bar = function () {
            // And now this.foo is undefined
    }

    setInterval(this.bar, 1000)
}

Answer 1

It happens because setInterval calls this.bar in context of global object, not in the context of current object. Try to call it in this way:

var self = this;
setInterval(function () { self.bar() }, 1000);

Update As it has been pointed in comments, another option is to use bind()

setInterval(this.bar.bind(this), 1000);

Answer 2

because this is the window scope when the interval runs. You need to use a closure or bind()

window.setInterval(this.bar.bind(this), 1000);

Answer 3

function Somethink(element) {
    var foo = element;

    var bar = function () {

    }

setInterval(bar, 1000)
}

Use variables instead. 'This' changes context depending where you call it

Answer 4

The behavior is correct. At the time when bar() is called, this might anything. The usual workaround is to assign this to a local variable:

function Somethink(element) {
    var that = this; // trick
    that.foo = element;

    that.bar = function () {
            // Use "that" in here
    }

    setInterval(that.bar, 1000)
}

that will make sure the code keeps a reference to the original value of this .

Answer 5

You can do like this :

function Somethink(element) {
    this.foo = element;

    this.bar = function () {
        // And now this.foo is undefined
    }
    var self = this

    setInterval(self.bar, 1000)
 }