Скомпилированная машинопись. Прототип функции потерял ссылку на "это"

Question

Я работал над примером todo-app с Redux и Maquettejs, используя Typescript. Я просто компилирую машинопись, а затем использую browserify для объединения всех файлов.js (эти файлы содержат файлы.ts приложения и библиотеки [redux, maquettejs]), я не получаю ошибок при компиляции, и все в порядке.

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

По крайней мере, для меня это не имеет смысла, так как оно явно определено. Я не эксперт, чтобы судить о скомпилированном коде, но в случае, если я создал поддельную реализацию http://jsbin.com/tenohitumi/edit?js,console,output и она работает как положено. Я не совсем понимаю, что происходит.

На всякий случай это класс "App", написанный с помощью машинописи.

import { h, VNodeProperties, VNode } from 'maquette';
import { Store } from 'redux';
import { TodoList } from './Todolist';

export class App {

    constructor(private store: Store<any>) {
    }

    render(): VNode {
        this.store;
        return h('div.main-component', [
            new TodoList(this.store).render()
        ]);
    }
}

// This is how I create the instance (it's in a different file)

import { createStore } from 'redux';
import { createProjector } from 'maquette';

import * as I from './interfaces/app';
import { MainReducer } from './reducers';
import { App } from './components/App';

let store = createStore(MainReducer);

let projector = createProjector();


document.addEventListener('DOMContentLoaded', function () {
  let app = new App(store);
  projector.append(document.body, app.render);
});

Я хотел бы знать, если, так или иначе, может ли что-то вне анонимной функции (в самом пакете) повлиять на значение "this", или помешать этому быть установленным?

Answer 1

Как @squint ответил в комментарии, render метод становится осиротевшим от его App случай, когда вы передаете его projector.append, Рассмотреть вопрос о замене оригинальной линии

projector.append(document.body, app.render);

с

projector.append(document.body, () => app.render());

Кроме того, вы можете определить render вместо этого, используя функцию стрелки, которая не будет содержать исходную ссылку на this,

export class App {
    constructor(private store: Store<any>) {
    }

    render = (): VNode => {
        return h('div.main-component', [
            new TodoList(this.store).render()
        ]);
    }
}