gusssar / ticker

Ticker

Почему this._i не увеличивается. Как исправить? В примере:

function Ticker() {
    this._i = 0
    };
Ticker.prototype = {
    tick: function() {
            console.log(this._i++);
            }
};
var ticker = new Ticker();

setInterval(ticker.tick, 1000);

this._i не увеличивается из-за потери контекста: setInterval получил функцию ticker.tick равной

ƒ () {
   console.log(this._i++)
}

но не её контекст.

Есть несколько вариантов получения нужного результата:

1. Используем встроенный метод bind для привязки контекста

function Ticker() {
   this._i = 0
   };
Ticker.prototype = {
   tick: function() {
           console.log(this._i++);
           }
};
var ticker = new Ticker();

setInterval(ticker.tick.bind(ticker), 1000);

Здесь мы указываем, что к функции ticker.tick привязывается контекст ticker 2. Оборачиваем вызов ticker.tick в анонимную функцию:

function Ticker() {
    this._i = 0
    };
Ticker.prototype = {
    tick: function() {
            console.log(this._i++);
            }
};
var ticker = new Ticker();

setInterval(
    function (){
        ticker.tick()
    }, 1000);

здесь ticker достаётся из замыкания. 3. С помощью вспомогательной функции HelpUs():

function Ticker() {
   this._i = 0
   };
Ticker.prototype = {
   tick: function() {
           console.log(this._i++);
           }
};
var ticker = new Ticker();

function HelpUs(func, context){
   return () => func.apply(context, arguments)
   }

setInterval(HelpUs(ticker.tick, ticker), 1000);

С помощью вспомогательной функции HelpUs получаем "обёртку", которая передаёт вызов в func (ticker.tick), с теми же аргументами, но фиксированным контекстом context (ticker)