Pesquisa de site

typescript1.8 - Esta palavra-chave em typescript não se refere à classe


Eu tenho um problema com a palavra-chave 'this' em TypeScript. Como você pode ver abaixo, eu quero chamar o método1 de alguma função 'interna', por exemplo, o método FileReader.onloadend. No entanto, 'this' referencia o FileReader, e não a classe foo. Como posso mudar meu código para fazer isso funcionar?

export class foo {

   constructor() {
       this.method2();
   }

   public method1() {
      console.log('method1 called');         // this never happens
   }

   public method2() {
      let reader: FileReader = new FileReader();

      reader.onloadend = function(e) {
          console.log(this)                  //it prints FileReader object
          this.method1();                    //I want this to be refered to class foo
      }
   }
}

Resposta #1

Use a nova sintaxe literal de função com setas longas:

public method2() {
  let reader: FileReader = new FileReader();

  reader.onloadend = (e) => {
      console.log(this) //it no longer prints FileReader object
      this.method1();   //method1 called
  }
}

Usando arrow functions, this agora sempre se refere à classe, em vez do escopo da função. Você pode conferir o MDN para mais informações sobre this léxico e a sintaxe curta de funções.

A documentação é para ES6, mas se aplica igualmente ao Typescript, já que é um superset estrito.

Resposta #2

Mude isto:

reader.onloadend = function(e) {
    console.log(this)                  //it prints FileReader object
    this.method1();                    //I want this to be refered to class foo
}

para isto:

reader.onloadend = (e) => {
    console.log(this)                  //it prints FileReader object
    this.method1();                    //I want this to be refered to class foo
}

Você pode ler mais sobre funções arrow aqui.

Artigos relacionados