Вложенные функции стрелка получает глобальную область видимости

Question

Вот упрощенная версия кода:

class Service { 
    static _runRequest = (request, success, failure) => { 
     request.then(
      (response) => { 
       if (ResponseHelper.wasSuccessful(response)) { 
        success(response); 
       } 
       else if (ResponseHelper.wasUnauthorized(response)) { 
        SessionHelper.refreshCurrentSession().then(
         (refreshResponse) => { 
          if (refreshResponse === true) { 
           this._runRequest(request, success, failure); 
          } 
         } 
        ); 
       } 
      } 
     ); 
    } 
} 

Вопрос заключается в том, что при вызове _runRequest снова, если сеанс был обновлен успешно, this указывает на глобальную область видимости.

Любые идеи, почему и как это исправить? Не должно this оставаться таким же независимо от того, сколько вложенных функций есть?

Answer 1

В коде this будет глобальный объект или undefined (в зависимости от строгих настроек & среды), независимо от уровня вложенности вы находитесь. Это похоже, что как только вы выполняете первую строку в статическом методе.

Вместо определения статического метода с синтаксисом стрелки, используйте более установленный, укороченную функцию обозначение:

static _runRequest(request, success, failure) { // ...etc 

Это заставит this ссылаться на объект «класса».

Ниже для сравнения двух способов определения статического метода, с упрощенным кодом (без вложенности, никаких обещаний) с помощью Бабеля:

class Service1 { 
 
    static _runRequest = (i) => { 
 
     if (i == 0) { 
 
      console.log('zero'); 
 
      return; 
 
     } 
 
     if (this && '_runRequest' in this) { 
 
      return this._runRequest(0); // recurse 
 
     } 
 
     console.log('this is ' + this); 
 
    } 
 
} 
 

 
Service1._runRequest(1); 
 

 
class Service2 { 
 
    static _runRequest(i) { 
 
     if (i == 0) { 
 
      console.log('zero'); 
 
      return; 
 
     } 
 
     if (this && '_runRequest' in this) { 
 
      return this._runRequest(0); // recurse 
 
     } 
 
     console.log('this is ' + this); 
 
    } 
 
} 
 

 
Service2._runRequest(1);