如何避免硬编码？在装饰器中

我读过了“如何实现打字稿装饰器？”和多个来源，但有些事情我无法使用装饰器完成。

class FooBar {
    public foo(arg): void { 
        console.log(this);
        this.bar(arg);
    }
    private bar(arg) : void { 
        console.log(this, "bar", arg);
    }
}

如果我们调用该函数foo:

var foobar = new FooBar();
foobar.foo("test"); 

物体FooBar通过以下方式登录到控制台console.log(this); in foo

字符串"FooBar {foo: function, bar: function} bar test"通过以下方式登录到控制台console.log(this, "bar", arg); in bar.

现在让我们使用装饰器：

function log(target: Function, key: string, value: any) {
    return {
        value: (...args: any[]) => {
            var a = args.map(a => JSON.stringify(a)).join();
            var result = value.value.apply(this, args); // How to avoid hard coded this?
            var r = JSON.stringify(result);
            console.log(`Call: ${key}(${a}) => ${r}`);
            return result;
        }
    };
}

我们使用相同的函数但经过修饰：

class FooBar {
    @log
    public foo(arg): void { 
        console.log(this);
        this.bar(arg);
    }
    @log
    private bar(arg) : void { 
        console.log(this, "bar", arg);
    }
}

我们调用foo正如我们之前所做的：

var foobarFoo = new FooBar();
foobarFooBar.foo("test");

物体Window通过以下方式登录到控制台console.log(this); in foo

And bar永远不会被调用foo因为this.bar(arg); causes Uncaught TypeError: this.bar is not a function.

问题是硬编码this在 - 的里面log装饰器：

value.value.apply(this, args);

怎样才能保存原来的this value?

不要使用箭头函数。使用函数表达式：

function log(target: Object, key: string, value: any) {
    return {
        value: function(...args: any[]) {
            var a = args.map(a => JSON.stringify(a)).join();
            var result = value.value.apply(this, args);
            var r = JSON.stringify(result);
            console.log(`Call: ${key}(${a}) => ${r}`);
            return result;
        }
    };
}

这样它将使用该函数的this上下文而不是值this当调用日志时。

顺便说一句，我建议编辑描述符/值参数并返回它，而不是通过返回新描述符来覆盖它。这样，您可以将当前属性保留在描述符中，并且不会覆盖另一个装饰器可能对描述符所做的操作：

function log(target: Object, key: string, descriptor: TypedPropertyDescriptor<any>) {
    var originalMethod = descriptor.value;

    descriptor.value = function(...args: any[]) {
        var a = args.map(a => JSON.stringify(a)).join();
        var result = originalMethod.apply(this, args);
        var r = JSON.stringify(result);
        console.log(`Call: ${key}(${a}) => ${r}`);
        return result;
    };

    return descriptor;
}

这个答案中有更多详细信息- 请参阅“示例 - 无参数 > 注释”下的“坏与好”示例