从另一个方法的内部函数访问Typescript类方法或属性

Question

Basically the title already explains the problem. I have attached a code extract, which should put my idea across.

export class MyComponent {

  constructor(private element: ElementRef, private myservice:MyService){}

  onChange(event: any): void {
    // works fine
    var imageElem = this.element.nativeElement.querySelector('.image');
    reader.onloadend = function() {
      // works fine
      console.log(imageElem)
      // does not work
      this.doSome(src);
      // does not work
      this.myservice.doSome();
    }
    reader.readAsDataURL(file);
  }

  doSome(src:string) {}
}

Answer 1

I would leverage arrow function for the onloadend like:

reader.onloadend = () => {
  ...   
}

This way this will be instance of MyComponent inside callback because:

arrow functions capture the this value of the enclosing context