Почему метод tick не видит переменные?

Question

[JustHum6n]

Выдает ошибку place is not defined
И time is not defined
Почему метод не видит переменные, созданные в конструкторе?

class Timer {
constructor(time, place) {
this.time = time;
this.place = place;
}
tick = function(){
this.time--;
place.innerHTML = time;
}
var place = document.querySelector(".dii");
var timer1 = new Timer(20, place);
timer1.tick();

Comments

[Владимир]

Завершите ваш код в тег code, без форматирования смотреть больно

Answer 1

[Stockholm Syndrome]

фигурных скобок не хватает, неужели редактор кода не подсвечивает?

Comments

[JustHum6n]

А почему он на 6 строку ругается? Unexpected token .
Неужели там this не нужен?

[Stockholm Syndrome]

JustHum6n, не нужен

[JustHum6n]

Исправил, вот
class Timer {
constructor(time, place) {
this.time = time;
this.place = place;
}
tick = function(){
this.time--;
place.innerHTML = time;
}
}
var a = document.querySelector(".dii");
var timer1 = new Timer(20, a);

timer1.tick();

В итоге опять, как и в начале выдает: place is not defined
и с time то же самое
Что такое то?

[Stockholm Syndrome]

JustHum6n, this.place.innerHTML = this.time;

P.S. используйте тег code для форматирования кода

[JustHum6n]

почему в контексте timer1.tick() все нормально отрабатывает, а как только оборачиваю это в сет интервал, сразу потеря контекста. setInterval(function() { timer1.tick();}, 1000); это работает
Но почему?? В чем разница?

[Stockholm Syndrome]

JustHum6n, this в функции будет ссылаться на тот объект, который был перед точкой при вызове, исключая метод bind (так просто легче запомнить)
timer1.tick() // this === timer1
допустим, setInterval такая под капотом

function setInterval(func, delay) {
  // ... 
  func(); // нет точки, поэтому this === undefined, если контекст явно не привязан методом bind
  // ...
}

это лишь способ проще запомнить, для полного ознакомления читайте учебник