打字稿方法装饰器

Question

我有这个代码

function changeFunc() {
    return function(target: any, title: string, descriptor: PropertyDescriptor) {

        descriptor.value = function () {
            console.log(this.name);
        };

        return descriptor;

    }
}


class Man {
    name: string = "asdsds";

    constructor(name: string) {
        this.name = name;
    }

    @changeFunc()
    getName() {
        console.log("Hello");
    }

}


var man = new Man('Manos Serifios');
man.getName();  

换句话说，我尝试（使用装饰器）更改方法

getName() {  
    console.log("Hello");  
}  

有了这个

function () {
    console.log(this.name);
}

但 this.name 评估为未定义。

如果我控制台记录“这个”似乎是正确的（例如男人）。

Answer 1

您在装饰器方法中没有特定对象实例的上下文。 参数如下（来自https://www.typescriptlang.org/docs/handbook/decorators.html ）：

静态成员的类的构造函数，或实例成员的类的原型。

成员的姓名。

成员的属性描述符。

Answer 2

你可以做一点黑客。 替换你的代码

descriptor.value = function () {
  console.log(this.name);
};

用这个不错的技巧：

descriptor.value = function () {
  // Hack 
  const self = this as Man;
  console.log(self.name);
};

Answer 3

@hackerman 的回答对我有用，因为它似乎只是一个打字问题。 另一种解决方案是为该函数主动定义this的类型：

descriptor.value = function (this: Man) {
  console.log(this.name);
};

Answer 4

只需将changeFunc()的返回值更改为changeFunc() 箭头函数即可解决问题。
那是因为

在箭头函数中， this保留了封闭词法上下文this 。

参考： https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

PS。 我知道它很旧，但是仍然有人会觉得它有用。