编译的打字稿。函数原型失去对“this”的引用

时间:2016-11-05 23:55:45

标签: javascript typescript redux maquette

我正在使用Typescript处理Redux和Maquettejs的todo-app示例。我只是编译typescript,然后我使用browserify捆绑所有.js文件(这个文件包含应用程序.ts文件,以及库[redux,maquettejs]),编译时没有错误,一切正常。

当我尝试在浏览器上看到结果时出现问题,我收到此错误。

enter image description here

至少对我来说,没有任何意义,因为它是明确定义的。我不是判断编译代码的专家,但是如果我创建了一个模拟的实现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”的值,还是阻止设置它?

1 个答案:

答案 0 :(得分:4)

正如@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()
        ]);
    }
}