Не инкрементируется значение i

252

08 октября 2018, 22:00

Возник вопрос в коде, а именно не инкрементируется значение this._i.

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

Прошу помощи, заранее спасибо!

Answer 1

Дело вот в чем. Когда Вы передаете ссылку на функцию ticker.tick первым параметром в setInterval, контекст (объект ticker) туда не попадает. Эта функция вызывается в контексте window, у которого свойства _i нет. Обратите внимание, я добавил this._i в console.log, и самое первое обращение к этому свойству, до каких-либо арифметических действий с ним, выводит undefined. Надо передавать в setInterval обертку функции с контекстом:

function Ticker() { 
  this._i = 0; 
}; 
 
Ticker.prototype = { 
  tick: function() { 
    console.log(this._i, this._i++); 
  } 
}; 
 
var ticker = new Ticker(); 
 
setInterval(ticker.tick.bind(ticker), 1000); 
// или setInterval(Ticker.prototype.tick.bind(ticker), 1000);

Answer 2

Возник вопрос в коде, а именно не инкрементируется значение this._i.

Происходит потеря контекста при вызове setInterval

Вариант №1:

function Ticker() { 
  this._i = 0; 
}; 
Ticker.prototype = { 
  tick: function() { 
    console.log(this._i++); 
  } 
}; 
var ticker = new Ticker(); 
// Вызов функции, обертка сохранит контекст  
setInterval(() => { 
  ticker.tick() 
}, 1000);

Вариант №2:

function Ticker() { 
  this._i = 0; 
  // Убрали в саму функцию 
  this.tick = () => { 
    console.log(this._i++); 
  } 
}; 
var ticker = new Ticker(); 
setInterval( 
  ticker.tick // Сохранит контекст 
, 1000);