Проблема контекста JavaScript с использованием setInterval с прототипом

Question

Я пытаюсь разобраться с этой проблемой контекста, используя прототипное наследование (с которым я раньше не играл).У меня есть объект AutoScroller:

function AutoScroller() {  
    this.timer = null;  
}  

AutoScroller.prototype = {

    stop: function() {
        if (this.timer == null) {
            return;
        }  

        clearInterval(this.timer);
        this.timer = null;
        console.log("stop");
    },  

    start: function() {
        if (this.timer != null) {
            return;
        }
        this.timer = setInterval(function() { this.move(); }, 3000);
        console.log("start");
    },

    move: function() {
        console.log("move");
    }

};

Когда документ готов, я запускаю все, выполняя это:

var scr = new AutoScroller();  
$('div.gallery p.stopBtn').bind("click", scr.stop);  
$('div.gallery p.startBtn').bind("click", scr.start);  

Все проблемы возникают, потому что «this» всегда относится к «p.startBtn».', а не scr, поэтому, когда вызывается функция запуска с setInterval, я получаю сообщение об ошибке "this.move () не является функцией".

Я знаю, что контекст - это довольно фундаментальная концепция, из которой я появляюсьпонятия не имею.Есть идеи, как с этим разобраться?

Answer 1

Я наконец-то с этим справился ... Я использовал замыкание при нажатии кнопки вот так:

var scr = new AutoScroller();
$('div.gallery p.startBtn').bind('click', function(x) {
    return function() {
        x.start();
    }
}(scr));

А также реализовал изменение, упомянутое SimpleCoder выше.

Answer 2

Вы также можете передать текущий экземпляр объекта в метод setInterval, чтобы он всегда имел доступ к 'this'.

Проверено на IE11, Chrome, Opera и Firefox.

setInterval(function (objRef) {              
        objRef.foo();
    }, 500, ***this***);

Answer 3

Изменить start на это:

start: function() {
    if (this.timer != null) {
        return;
    }
    var that = this;
    this.timer = setInterval(function() { that.move(); }, 3000);
    console.log("start");
}