Почему 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++)
}
но не её контекст.
Есть несколько вариантов получения нужного результата:
- Используем встроенный метод 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)