在TypeScript中无法访问lambda中的类作用域？

Question

I have the following class in TypeScript that is used as a Pipe by Angular 2 to render markdown. It compiles without errors, but hits an exception at runtime on the marked line:

var Remarkable = require('remarkable');

@Pipe({
    name: 'markdown'
})
export class MarkdownPipe implements PipeTransform {
    public remarkable;

    constructor(private sanitizer: DomSanitizationService) {
        this.remarkable = new Remarkable({
            typographer: true
        });

        this.remarkable.use(this.parseVideos);
    }

    transform(value: string) : SafeHtml {
        if (value != null) {
            return this.sanitizer.bypassSecurityTrustHtml(this.remarkable.render(value));
        }
        return null;
    }

    public parseVideos(md) : void {
        md.inline.ruler.push('video', (state) => {
            return this.parseMedia(state, '@', 'video'); // this is undefined
        });
    }

    public parseMedia(state, startingMarker, tokenName) : boolean {
        // do stuff
    }
}

When I this code attempts to execute, I get a runtime error telling me that:

Where _this refers to the same line I have commented above. Why is this? My IDE reports that I should have access to the parseMedia method inside of my lambda expression.

What's the best solution to this?

Answer 1

That's because you pass it here:

this.remarkable.use(this.parseVideos);

Then when the method is invoked the this no longer points to your instance of MarkdownPipe .

In order to preserve the right scope for this you can either have another arrow function:

this.remarkable.use(md => this.parseVideos(md));

Or you can use the Function.prototype.bind() :

this.remarkable.use(this.parseVideos.bind(this));