将类方法传入Express中间件时this指向异常致属性未定义

问题根源在于：当你把orderController.createOrder直接作为路由处理函数传递时，这个方法的this绑定会丢失，调用时this不再指向orderController实例，导致this.orderModel变成undefined。

下面是三种可行的解决办法：

1. 在路由中用bind绑定this #

直接在注册路由时，通过bind方法把this强制绑定到orderController实例上：

import { Router } from "express";
import { OrderController } from "../../controller/orders.controller";
export const orderRouter = Router();

const orderController = new OrderController();
// 用bind绑定this到实例
orderRouter.post("/", orderController.createOrder.bind(orderController));

2. 在类的构造函数中提前绑定this #

在OrderController的构造函数里，把createOrder方法的this绑定到当前实例，后续传递方法时就不会丢失绑定：

import { OrderModel } from "../database/model/order.model";

export class OrderController {
  orderModel: OrderModel;

  constructor() {
    this.orderModel = new OrderModel();
    // 提前绑定this到实例
    this.createOrder = this.createOrder.bind(this);
  }

  async createOrder(req: Request, res: Response, next: NextFunction) {
    const newOrder = ...

    ...

    const order = await this.orderModel.save(newOrder);

    res.json(order);
  }
}

这种方式下，路由代码不需要做任何修改。

3. 用箭头函数定义类方法 #

箭头函数的this遵循词法作用域，会自动绑定到类的实例上，所以直接用箭头函数定义createOrder方法即可：

import { OrderModel } from "../database/model/order.model";

export class OrderController {
  orderModel: OrderModel;

  constructor() {
    this.orderModel = new OrderModel();
  }

  // 用箭头函数定义方法，自动绑定this
  async createOrder = (req: Request, res: Response, next: NextFunction) => {
    const newOrder = ...

    ...

    const order = await this.orderModel.save(newOrder);

    res.json(order);
  }
}

这种方式同样不需要修改路由代码，写法更简洁。

内容的提问来源于stack exchange，提问作者Thanos Sakis