TypeScript类成员函数返回另一个函数的技术问题咨询

首先看你的代码，核心问题出在init方法返回的普通函数里的this指向不对。当Express调用这个中间件函数时，this的上下文并不是你的AccessTokenMiddleWare实例，而是Express内部的上下文对象，这就导致调用this.addJwtToReqBody时会报错——因为这个方法是类的私有方法，只有实例上才有，而此时的this根本不是你的类实例。

下面给你几种可行的修复方案：

方案1：使用箭头函数绑定上下文 #

箭头函数会继承外层作用域的this，也就是init方法执行时的类实例，这样就能正确调用addJwtToReqBody了：

import {Request, Response, Router} from 'express';
import {IAccessTokenMiddleWare} from "./IAccessTokenMiddleWare";

class AccessTokenMiddleWare implements IAccessTokenMiddleWare {
    private jwtToken: string;
    constructor() {
        this.jwtToken = "";
    }
    public init() : any {
        // 改用箭头函数，继承外层的this（类实例）
        return (req: Request, res: Response, next: any) => {
            this.addJwtToReqBody(req);
            next(); // 别忘了调用next，否则请求会挂起
        }
    }
    private addJwtToReqBody(req: Request) {
        console.log("ADDED...")
        // 这里可以处理req，比如把jwtToken加到req.body里
        req.body.jwtToken = this.jwtToken;
    }
}
export {AccessTokenMiddleWare}

方案2：手动绑定this到类实例 #

如果坚持要用普通函数，可以用bind方法把函数的this绑定到类实例：

public init() : any {
    return function (req: Request, res: Response, next: any) {
        this.addJwtToReqBody(req);
        next();
    }.bind(this); // 绑定this为类实例
}

方案3：保存this到变量 #

在init方法里先把实例的this存到一个变量（比如self），然后在普通函数里用这个变量调用方法：

public init() : any {
    const self = this; // 保存实例的this
    return function (req: Request, res: Response, next: any) {
        self.addJwtToReqBody(req);
        next();
    }
}

另外还要注意：你的中间件里别忘了调用next()，否则请求会一直挂起，不会继续往后执行后续的路由处理逻辑。

内容的提问来源于stack exchange，提问作者Kiren S