Получить экземпляр класса (this) в функции внутри объекта instance - typescript / angular

Question

У меня есть отдельный объект, который управляет определенным диалоговым окном.Рассмотрим следующий код.Поскольку очень легко представить, что делают функции, я не могу получить доступ к экземпляру класса.Я попытался использовать традиционный подход that = this.

export class Whatever implements OnInit {

    that = this;

    dialog = {
       data:{},
       open:function() {
           //way to access 'that' variable
       },
       close:function() {},
       toggle:function() {}
    }

    //other declarations and functions
}

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

Также, если есть какой-то лучший подход к этому, я хотел бы знать.Спасибо.

Answer 1

Лучшим способом было бы заменить function(){} на функции стрелок ES6, которые содержат ваш this контекст, например, () => {}.

Вы также можете использовать functions(){}.bind(this), но гораздо лучше просто использовать функции стрелок.Оба сохранят вашу ссылку на this, как и ожидалось в теле функции

Answer 2

В вашем коде that не является переменной, это свойство экземпляра Whatever.

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

Чтобы обеспечить доступ к экземпляру Whatever, вы можете использовать функции стрелок и использовать this в функциях:

export class Whatever implements OnInit {

    dialog = {
       data: {},
       open: () => {
           // use `this` here
           // use `this.dialog.data` to acccess the data above
       },
       close: () => {},
       toggle: () => {}
    };

    //other declarations and functions
}

Это работает, потому что поля классов, объявленные так, как вы их объявили, эффективно инициализируются так, как если бы они были внутри вашего конструктора, а внутри конструктора this ссылается на экземпляр.Функции стрелок закрывают this контекста, в котором они созданы (точно так же, как закрывают переменную в области видимости).

Answer 3

Вы должны использовать функции стрелок, чтобы не потерять контекст (this);

export class Whatever implements OnInit {   

  dialog = {
     data:{},
     open:() => {
         //'this' will point to Whatever class's instance
     },
     close:() => {},
     toggle:() => {}
  }

  //other declarations and functions
}