теряется this

[victornalchik]

Здравствуйте! Возникла проблема с потерей this.
Имеется у класса контроллер метод startGame (общается к классу модели), который вызывается при нажатии кнопки.

первый вариант все отрабатывает и показывает(разовый вызов при нажатии 1- вариант), как только заношу в setInterval(для переодического вызова 2-ой), this теряется. Не знаю как решить проблему(


startGame(){

//1-ый вариант

this.matrix = this.model.createChangeMatrix(this.matrix, this.row, this.column, null, null);
return this.matrix;



//2-ой вариант

this.flagGame = setInterval(function() {
this.matrix = this.model.createChangeMatrix(this.matrix, this.row, this.column, null, null);
return this.matrix;
},1000);


}

[рони]

victornalchik,
сохраните this в переменную, классика var that = this; ...that.matrix =

[Rasy]

сохраните this в переменную, классика var self = this; ...self.matrix =

Я как-то читал, что в self не рекомендуется сохранять. Правильнее использовать ключевое слово that

[Dilettante_Pro]

self - ключевое слово js, ссылка на текущее окно, поэтому лучше использовать that или что угодно другое

[victornalchik]

Большое спасибо! Помогло!

[рони]

Rasy,
Dilettante_Pro,
ок!

[Dilettante_Pro]

рони,
Бдим!

[nerv_]

перечислю все известные мне способы решения "детских" проблем с this. Почему детских? Потому, что разработчики со стажем знают, что this в JS -- динамический.


1) используя замыкание (об этом писали здесь выше)

function foo() {
  const that = this
  setTimeout(function () {
    console.log(that)
  })
}

2) используя привязку контекста и каррирование -- .bind()

function foo() {
  setTimeout(function () {
    console.log(this)
  }.bind(this))
}

3) явное указание контекста -- .apply() .call()

function foo() {
  console.log(this)
}

foo.call(/*ctx*/)
foo.apply(/*ctx*/)

4) используя arrow function

function foo() {
  setTimeout(_ => {
    console.log(this)
  })
}

5) используя классы TypeScript (если я правильно помню, могу ошибаться)

[Aetae]

А можно и по-извращаться.)
Например мне нравится такой милый ленивый геттер, который заодно ещё и биндит this к функции, 2 в 1 :

var obj = {
  bar: false,
  get foo(){
    this.bar = 2;
    delete this.foo;
    return this.foo = () => {
      this.bar *= 2;
    }
  }
}

setTimeout(obj.foo, 100);
setTimeout(()=>console.log(obj.bar), 200);

оно конечно надо не всегда, но когда совпадает - приятно.)