ts访问器装饰器的疑问？

作者站长头像
站长
· 阅读数 4

我刚刚学习访问器的装饰器，现在我想对set访问器进行装饰，期待返回：set装饰器 + name,但是一直没有效果，请教一下懂的同学。demo:


// 访问器装饰器
function testDecorator(target: any, key: string, descriptor: PropertyDescriptor) {
    descriptor.set = (name: string) =>{ // set如何访问 this._name
        name = "set装饰器：" + name;
        return name;
    }
}

// 类
class Test {
    private _name: string;
    constructor(name: string) {
        this._name = name;
    }
    get name() {
        return this._name;
    }
    @testDecorator // 希望通过装饰器，对this._name做一点处理
    set name(name: string) {
        this._name = name;
    }
}
const test = new Test('111');
test.name = '222'
console.log(test.name); // 还是输出:  111， 期待输出:  set装饰器：222
回复
1个回答
avatar
test
2024-07-06

你需要稍微修改装饰器的实现。你可以把原始的set方法保存在一个变量中，然后在装饰器的set方法中调用它。这里是修复后的代码：

// 访问器装饰器
function testDecorator(target: any, key: string, descriptor: PropertyDescriptor) {
    const originalSet = descriptor.set; // 保存原始的 set 方法

    descriptor.set = function(name: string) {
        name = "set装饰器：" + name;
        originalSet.call(this, name); // 使用 .call(this, ...) 调用原始的 set 方法
    }
}

// 类
class Test {
    private _name: string;
    constructor(name: string) {
        this._name = name;
    }
    get name() {
        return this._name;
    }
    @testDecorator // 希望通过装饰器，对this._name做一点处理
    set name(name: string) {
        this._name = name;
    }
}
const test = new Test('111');
test.name = '222'
console.log(test.name); // 输出: set装饰器：222

现在，装饰器将正确地修改name值并将其保存在_name属性中。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容