Question

我想在课程方法中保留this。我可以使用箭头函数，但我想覆盖扩展类中的一些方法。

现在我有了这个解决方案并且有效：

class Foo {
    bar = "Context preserved.";
    constructor() {
        this.foo = this.foo.bind(this);
    }
    foo() {
        alert(this.bar);
    }
}

class Foo2 extends Foo {
    foo() {
        alert(this.bar + " Class extended");
    }
}

class Bar {
    bar = "Context lost.";
}


let foo = new Foo2();
let bar = new Bar();

foo.foo.apply(bar); // Context preserved. Class extended

这样做是一种好习惯吗？如果是，typescript中是否有一些关键字会自动执行？

像

class Foo() {
    public conserved foo() { }
}

生成：

var Foo = (function () {
    function Foo() {
        this.foo = this.foo.bind(this);
    }
    Foo.prototype.foo = function () { };
    return Foo;
}());

Answer 1

这是一种有效的做法，并且正在使用中我不知道告诉打字稿自动执行此操作的方法，但您可以在issues中搜索类似的内容。

你可以有一个装饰师为你做这件事，例如：

function construct(constructor: Function, methods: string[], args: any[]) {
    var c: any = function () {
        return constructor.apply(this, args);
    }
    c.prototype = constructor.prototype;
    let instance = new c();
    methods.forEach(name => {
        instance[name] = instance[name].bind(instance);
    });

    return instance;
}

function BindMethods(constructor: Function) {
    const methods = [] as string[];

    Object.keys(constructor.prototype).forEach(name => {
        if (typeof constructor.prototype[name] === "function") {
            methods.push(name);
        }
    });

    return (...args: any[]) => {
        return construct(constructor, methods, args);
    };
}

@BindMethods
class Foo {
    bar = "Context preserved.";

    foo() {
        console.log(this.bar);
    }
}

let foo = new Foo();
setTimeout(foo.foo, 10);

（code in playground）

我用这个简单的用例测试它，它工作得很好。

打字稿：上下文保存。这样做是不是一个好主意？

1 个答案: