ExpressJS/NodeJS中ES6类实现中间件的TypeError问题

问题描述 #

在Express中使用ES6类实现中间件时，applyMiddleware方法能正常接收req和res对象，但调用handleMiddleware方法时抛出错误：

TypeError: Cannot read properties of undefined (reading 'MyMiddleware')

类实现代码：

class MyMiddleware {
  constructor() {}
  
  handleMiddleware(req, res) {
     // 无法获取req和res
     console.log('Request incoming: ', req);
     console.log('Response outcoming: ', res);
  }

  applyMiddleware(req, res, next) {
     console.log(req, res); // 正常打印内容
     this.handleMiddleware(req, res);
     next();
  }
}

export default MyMiddleware;

应用中间件的代码：

const app = express();
const middleware = new MyMiddleware();
app.use(middleware.applyMiddleware)

...more code...

错误原因 #

核心问题是JavaScript的this绑定规则：

• 当你把middleware.applyMiddleware作为参数传给app.use时，这个方法会被Express单独调用，此时它的this上下文已经和原MyMiddleware实例解绑，在严格模式下会变成undefined。
• 当applyMiddleware内部调用this.handleMiddleware时，this是undefined，自然找不到对应的方法，因此抛出类型错误。

为什么用普通函数不会出现这个问题？

• 普通函数中间件要么不依赖this，要么调用时的this绑定不会影响核心逻辑；而类方法天生依赖实例的this上下文，一旦this丢失就会触发报错。

解决方案 #

有三种常用方式修复this绑定问题：

1. 用箭头函数包裹调用 #

箭头函数会继承外层作用域的this，确保applyMiddleware内部的this指向实例：

app.use((req, res, next) => middleware.applyMiddleware(req, res, next));

2. 在构造函数中绑定this #

在类的构造函数里，把applyMiddleware的this绑定到当前实例：

class MyMiddleware {
  constructor() {
    // 手动绑定this到实例
    this.applyMiddleware = this.applyMiddleware.bind(this);
  }
  
  handleMiddleware(req, res) {
     console.log('Request incoming: ', req);
     console.log('Response outcoming: ', res);
  }

  applyMiddleware(req, res, next) {
     console.log(req, res);
     this.handleMiddleware(req, res);
     next();
  }
}

3. 将applyMiddleware定义为类箭头函数 #

类字段中的箭头函数会自动绑定实例的this，无需额外处理：

class MyMiddleware {
  constructor() {}
  
  handleMiddleware(req, res) {
     console.log('Request incoming: ', req);
     console.log('Response outcoming: ', res);
  }

  // 用箭头函数定义类方法，自动绑定this
  applyMiddleware = (req, res, next) => {
     console.log(req, res);
     this.handleMiddleware(req, res);
     next();
  }
}

注：该语法需要Node.js环境支持类字段提案（v12+版本默认支持）。

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