Почему setInterval не работает?

143

15 марта 2019, 20:50

Почему не выводится имя? Ведь стрелочная функция сохраняет контекст вызова, по идее все должно работать, но это не так. Если заменить this.name на obj.name, то все работает как надо, из этого сделал вывод, что что-то не так с контекстом, поправьте, если что-то не так понял.

const obj = { 
  name: 'Coal', 
  float: () => { 
    setInterval(() => { 
      console.log(this.name); 
    }, 1000); 
  } 
} 
obj.float();

Answer 1

Дело в том, что this в стрелочной функции ссылается не на объект, в котором эта функция расположена в коде, а на текущий this того кода, который эту стрелочную функцию создаёт. Если в код добавить вывод this, то будет видно, что это либо глобальный объект:

console.log(this + ""); // этот this будет и у стрелочной функции 
 
const obj = { 
  name: 'Coal', 
  float: () => { 
    setTimeout(() => { 
      console.log(this.name); 
    }, 1000); 
  } 
} 
 
obj.float();

Answer 2

Чтобы внутри метода float this ссылался на obj, этот метод должен быть традиционной функцией.

const obj = { 
  name: 'Coal', 
  float: function() { 
    console.log("float: ", this.name); 
    setInterval(() => { 
      console.log("setInterval: ", this.name); 
    }, 1000); 
  } 
} 
obj.float();

В Вашем коде стрелочная функция, присвоенная float, сохраняет контекст, в котором создается obj, но это не obj с name: 'Coal'.