Что выведется через 5 секунд после инициализации экземпляра функции?

Question

[lil_web]

Помогите, пожалуйста, решить задачку с собеседования. Нужно было сказать, что выведется через 5 секунд, но у меня даже сам код запустился с ошибкой ReferenceError: аgе is not defined.

function Person(age) {
  this.аge = аgе;

  sеtInterval(function () {
    this.agе++;
  }, 1000);
}

const vasyа = new Person(13);

// What will be logged after 5 seconds?
console.log(vasya.age);

UPD. Мне подсказали, что в названиях переменных была кириллица. Но почему в ответе не 18, даже со стрелочной функцией в колбеке?

Comments

[Ярослав Иванов]

В этом и прикол

Answer 1

[Иван Соломенников]

У вас проблемы в коде с именами были.

function Person(age) {
  this.age = age;

  setInterval(function () {
    this.age++;
  }, 1000);
}

const vasya = new Person(13);

// What will be logged after 5 seconds?
console.log(vasya.age); // Выведет в консоль число 13

Comments

[lil_web]

Точно, спасибо! Интересно, интервьюеры специально так делают, чтобы кандидат не смог быстро залогировать?)

С ошибкой разобрались. А почему в ответе будет не 18, даже если заменить колбек на стрелочную функцию?

[Иван Соломенников]

lil_web,

А почему в ответе будет не 18, даже если заменить колбек на стрелочную функцию?

Стрелочные функции не имеют собственного this. При обращении к age: vasya.age получаем значение и только потом запускается setInterval.

Также в анонимной функции, которая выступает в роли callback функции, у функции setInterval не доступен контекст this, контекст this необходимо сохранить, как на примере кода ниже:

function Person(age) {
	this.age = age;

	const self = this;

	setInterval(function() {
		self.age++;
	}, 1000);
}

const vasya = new Person(13);

// What will be logged after 5 seconds?
console.log("vasya.age: ", vasya.age); // Выведет в консоль: vasya.age: 13

Если вам необходимо посмотреть, что происходит в callback функции, посмотрите через console.log:

setInterval(function() {
		console.log(self.age++);
	}, 1000);

Увидите примерно такое:

[lil_web]

Иван Соломенников, большое спасибо! Но у меня почему-то выводится NaN каждую секунду :с

function Person(age) {
  this.age = age;
  const self = this;

  setInterval(function () {
    console.log(self.agе++);
  }, 1000);
}

const vasya = new Person(13);

setTimeout(() => {
  console.log(vasya.age);
}, 5000); // 13

[Иван Соломенников]

lil_web, У вас что-то опять с символами, проверьте на каком языке код набираете.

Вот поправил ваш код:

function Person(age) {
  this.age = age;
  const self = this;

  setInterval(function () {
    console.log(self.age++);
  }, 1000);
}

const vasya = new Person(13);

setTimeout(() => {
  console.log(vasya.age);
}, 5000); // 13

Скрин:

[lil_web]

Иван Соломенников, спасибо. Но ведь мы получим 17 и со стрелочной функцией обратного вызова? Потому что у неё нет своего контекста.

function Person(age) {
  this.age = age;

  setInterval(() => {
    this.age++;
  }, 1000);
}

const vasya = new Person(13);

setTimeout(() => {
  console.log(vasya.age);
}, 5000); // 17

[Иван Соломенников]

lil_web, https://learn.javascript.ru/arrow-functions

Answer 2

[Rsa97]

аge ≢ аgе ≢ agе ≢ age
Строки выглядят одинаково, но кириллица и латиница - это разные символы.