开发者问题收集

为什么此类方法中的“this”未定义？

2017-08-11
17910
javascript node.js this undefined es6-class

我尝试搜索似乎整个互联网，但我仍然对我为微服务编写的 JS 类的问题感到烦恼（仍在学习中）。

因此，我尝试在实例化对象上调用类方法，根据我的知识和我的（我认为有缺陷的）单元测试，它应该可以工作。

好吧，我将从收到的错误开始： 

    GET /api/users 500 2.863 ms - 2649
TypeError: Cannot read property 'repository' of undefined
    at list (C:\Users\<user>\Documents\Programming\node\kaguwa-ngn\kaguwa-user-service\controllers\user-controller.js:20:9)
    at Layer.handle [as handle_request] (C:\Users\<user>\Documents\Programming\node\kaguwa-ngn\kaguwa-user-service\node_modules\express\lib\router\layer.js:95:5)
    at next (C:\Users\<user>\Documents\Programming\node\kaguwa-ngn\kaguwa-user-service\node_modules\express\lib\router\route.js:137:13)

（还有更多）。

代码调用代码： 

user-controller.js

'use strict';

var utils = require('./utils');

class UserController {

  constructor(repository) {
    this.repository = repository || {};
  }

  /**
   * 
   * Lists all users.
   * 
   * @param {object} req 
   * @param {object} res 
   */
  list(req, res) {

    this.repository.list(function (err, users) {
      if (err) return res.status(500).json(utils.createError(500));

      if (Object.keys(users).length !== 0) {
        res.json(users);
      } else {
        res.status(404).json(utils.createNotFound('user', true));
      }
    });
  }
// more code
}

module.exports = UserController

控制器调用者 

user-api.js


'use strict';

var express = require('express');
var UserController = require('../controllers/user-controller');

var router = express.Router();

module.exports = function (options) {

  var userController = new UserController(options.repository);

  router.get('/users', userController.list);
  // Mode code

  return router;
};

我真的不知道为什么 this 在 UserController 中未定义。

任何帮助都将不胜感激。

2个回答

当您执行此操作时： 

router.get('/users', userController.list);

传递给路由器的只是对 .list 方法的引用。 userController 实例会丢失。 这不是路由器独有的 - 这是 Javascript 中事物传递方式的通用属性。 要进一步理解，您本质上是在执行此操作： 

let list = userController.list; 
// at this point the list variable has no connection at all to userController
router.get('/users', list);

并且，在 Javascript 的 strict 模式下，当您调用没有任何对象引用的常规函数​​（例如调用上面的 list() ）时， this 在函数内部将是 undefined 。 这就是您的示例中发生的情况。要修复此问题，您需要确保使用正确的对象引用调用您的方法，如 userController.list(...) 中所示，以便解释器正确设置 this 值。

有多种方法可以解决此问题：

制作自己的函数包装器 

router.get('/users', function(req, res)  {
    userController.list(req, res);
});

这适用于任何版本的 Javascript。

使用 .bind() 为您创建一个使用正确对象调用它的包装器 

router.get('/users', userController.list.bind(userController));

这适用于 ES5+ 或 .bind() polyfill。

使用 ES6 箭头函数快捷方式 

router.get('/users', (...args) => userController.list(...args));

这适用于 ES6+

就我个人而言，我更喜欢 .bind() 实现，因为我认为它比其他任何实现都更简单、更具声明性/更清晰，而且 ES6“快捷方式”实际上并不短。

jfriend00
2017-08-11

router.get() 不会像您想象的那样调用您的类。您为其提供了一个函数引用，它将在 router.get 上下文中调用该函数，这意味着它不会在您的 userController 上下文中。

您可以通过执行以下操作来修复此问题： 

router.get('/users', function(){userController.list(...arguments)});

换句话说，不要明确使用 userController 对 list 的引用，而要明确使用一个闭包，让 userController 使用给定的参数调用 list 。

zero298
2017-08-11