javascript - 装饰器 : "this" is undefined when accessed in descriptor. 值

Question

我正在尝试装饰器，我写了一个装饰器，它基本上返回一个执行一些 `console.log 的新函数。

这是我的装饰器的样子:

function test(target, name, descriptor) {
    const original = descriptor.value;
    console.log("bbau");
    if (typeof original === 'function') {
        descriptor.value = function (...args) {
            console.log(`Arguments: ${args}`);
            try {
                console.log("executing");
                const result = original.apply(this, args);
                console.log("done");
                console.log(`Result: ${result}`);
                return result;
            } catch (e) {
                console.log(`Error: ${e}`);
                throw e;
            }
        }
    }
    return descriptor;
}

这就是我使用它的方式:

class TestController extends BaseController<//..> {
    // ... 
    @test
    testIt(req: Request, res: Response) : Response {
       this.sendResponse();
    }

    sendResponse(options: ISendResponseOptions, res: Response) : Response {
       // return response
    }
}

``但是，执行时会出现错误:Error: TypeError: Cannot read property 'sendResponse' of undefined。

有什么想法吗？谢谢!

Answer 1

当您想从声明函数的上下文中捕获 this 时(或者当 this 无关紧要时)，您通常应该使用箭头函数。在这种情况下，您确实希望 this 成为函数被调用的对象，因此您应该使用常规函数:

const test = (target, name, descriptor) => {
    const original = descriptor.value;
    if (typeof original === 'function') {
          descriptor.value = function (...args) {
            console.log(`Arguments: ${args}`);
            try {
                console.log("executing");
                const result = original.apply(this, args);
                console.log("done");
                console.log(`Result: ${result}`);
                return result;
            } catch (e) {
                console.log(`Error: ${e}`);
                throw e;
            }
        }
    }
    return descriptor;
}

您可以在 playground 中进行测试

如果您将此函数用作另一个函数的参数，您还应该调用 bind 为该函数设置 this(否则调用者将确定 这个):

router.route("/").post(testController.testIt.bind(testController))