typescript `this` is not what I expected

Question

I'm quite new to javascript/typescript. I have this code and I want to call a class function inside an event handler. The problem is that this is not what I expected.

class MyClass {

  private textInput: TextView;
  private _presenter: DateOptionPresenter;

  constructor(properties: { presenter: DateOptionPresenter } & CompositeProperties) {
    super(properties);
    this._presenter = properties.presenter;
    this.createUI();
  }

  private createUI() {
    this.append(
      this.textInput = new TextView({
        left: 5, right: 5, top: 5, bottom: 5
      }).on({tap: this.showDateDialog})
    );
  }

  private showDateDialog() {
    let selectedDate = new Date();
    new DateDialog({
      date: selectedDate
    }).on('select', (date) => this._presenter.fill(date))
    .open();
  }
}

So, In the last function showDateDialog(), when I call this it's in the TextView context instead of the MyClass, and this._presenter is undefined.

How can I access _presenter in there ?

please post the code line where `showDateDialog()` is called - maybe inside your template without using `.bind()` method? — messerbill, Feb 01 '18 at 15:43
`.on({tap: this.showDateDialog})` => `.on({tap: e => this.showDateDialog(e)})` See the linked question's answers for why. — T.J. Crowder, Feb 01 '18 at 15:43

Suren Srapyan · Accepted Answer · 2018-02-01T18:07:42.013

0

Just passing this.showDateDialog will lose the context to which the function was bound. You need either explicitly bind the context and return that or just call it inside another function.

.on({tap: () => this.showDateDialog()})

edited Feb 01 '18 at 18:07

answered Feb 01 '18 at 15:42

Suren Srapyan

66,568
14
114
112

5

Why post ***yet another answer*** to this oft-duplicated question? – T.J. Crowder Feb 01 '18 at 15:42
This is also not a good explanation. Context is vague. The function was indeed bound as you say, but it still is, just with the _exception_ of `this`. – Aluan Haddad Feb 01 '18 at 15:50
Yep. that was the problem. Thanks. and sorry for the repost, I did not find answer before – adi.neag Feb 01 '18 at 15:51

typescript `this` is not what I expected

1 Answers1