Рубрики
Без рубрики

Как получить доступ к «это» изнутри обратного вызова

Ключевое слово JavaScript Это источник боли для многих людей. Обычный вопрос идет что-то подобное: «Я звоню функцию Firebase, а внутри этого обратного вызова мне нужно …

Автор оригинала: Mark Wilbur.

Ключевое слово JavaScript это является источником боли для многих людей. Общий вопрос идет что-то вроде этого:

«Я делаю позвонить функцию FireBase, а внутри этого обратного вызова мне нужно получить доступ к этому, чтобы обновить моим реагированным компонентом».

Другим распространенным делом является Settimeout:

«Проблема в том, что STATIMEOUST принимает обратный вызов, но мне нужно получить доступ к этому, а Settimeout меняет это!»

Основное руководство

В нормальных обстоятельствах это относится к тому, что слева от точек в CallTime Отказ Есть несколько исключений, которые специально изменили поведение этого- Позвоните , Применить и привязывать Отказ Если вы не использовали одну из этих функций, чтобы изменить поведение этого, а затем посмотрите на левую часть точки в COOL.

Пример

var alarm = {
  ringer: function () {
    console.log("The " + this.color + " alarm: Ring!!!");
  },
  color: "red"
}

alarm.ringer();

Это довольно быстро. Когда вы звоните Alarm.ringer (); , вещь слева от точки – тревоги Отказ Итак, внутри функции Рингера это Является ли аварийный сигнал и цвет красный.

Ошибка в обратном вызове Settimeate

var alarm = {
  ringer: function () {
    console.log("The " + this.color + " alarm: Ring!!!");
  },
  set: function (milliseconds) {
    setTimeout(function () { this.ringer() }, milliseconds);
  },
  color: "red"
}

alarm.set(2000);

Целью здесь было то, что сигнал тревоги будет звонить через две секунды. К сожалению, мы получаем эту ошибку:

Это-settimeout.png.png

Причина в том, что уютные вызовы вызывают обратный вызов в него. Основываясь на ошибке, мы видим, что функция SettimeOut создана A Тайм-аут Объект и хранится функция обратного вызова, которую мы передали в нее как Timeout._ontimeout Отказ И В то время его называли , вещь слева от точки – это время ожидания, а не тревоги.

Классическое решение

Способ того, что «эта» проблема традиционно решена, присваивая «это» из внешнего объема на новую переменную, называемую либо «_Эта», либо «что».

var alarm = {
  ringer: function () {
    console.log("The " + this.color + " alarm: Ring!!!");
  },
  set: function (milliseconds) {
    var that = this;
    setTimeout(function () { that.ringer() }, milliseconds);
  },
  color: "red"
}

alarm.set(2000);

Теперь это работает. Поскольку значение «это» внутри Установить Функция – это тревога, а что это просто обычная переменная. Поскольку функции могут получить доступ к переменным из их окружающей массы, Это.рингер () Внутри обратного вызова это Alarm.ringer () Отказ

The red alarm: Ring!!!

Функция функции стрелки ES6

ES6 Arrow Функции Не работай совсем так же как обычные функции выражения. У них нет собственных привязки к «этому», поэтому любые ссылки на «это» используют привязки от ограждающей функции.

let alarm = {
  ringer: function () {
    console.log("The " + this.color + " alarm: Ring!!!");
  },
  set: function (milliseconds) {
    setTimeout(() => { this.ringer() }, milliseconds);
  },
  color: "red"
}

alarm.set(2000);

Поскольку ссылка MDN выше упоминается, функции стрелки плохо подходят для методов, но они удобны для упрощения обратных вызовов. В 2019 году большинство JS devs используют функции arrow для решения этой проблемы и встречаются только на «шаблон в библиотеках и устаревших кодах.

Первоначально опубликовано в https://logicmason.com 16 апреля 2019 года.

Читайте ещё по теме: