为什么我的 ES6（使用 Babel）类在实例方法中显示“this”未定义？

我正在使用 Hapi.JS 在 Node 中构建一个应用程序。

我有一个身份验证插件类，它给我带来了各种各样的问题。当我尝试引用时this从类的方法中，我收到一条错误消息this未定义。为什么会发生这种情况？

摘录：

class OAuth {

  constructor () {}

  register (server, err, next) {
    this.server = server;
    this.registerRoutes();
  }

  registerRoutes () {
    console.log(this.server.route);
    this.server.route([
      {
          method: 'POST',
          path: '/oauth/token',
          config: {
              auth: false,
              handler: function(request,reply){
                console.log("test");
                reply("test");
              }
            }
      },
      {
        method: 'GET',
        path: '/test',
        config: {
          auth: false,
          handler: function(request,reply){
            console.log("test");
            reply("test");
          }
        }
      }
    ]);
  }
}
module.exports = new OAuth();

在其他地方，这被称为：

const oauth = require('./oauth');
oauth.register(server);

每次调用寄存器函数时，我都会收到此错误：

TypeError: Cannot set property 'server' of undefined

为什么我的实例无法正常工作？

带有 babel 的 ES6 类不会自动绑定this为你。这是一个常见的误解，因为class被介绍了。有多种方法可以解决它。

1. 使用ES7。 Babel 有一个实验（截至本文）类属性 https://babeljs.io/docs/plugins/transform-class-properties/插入。

   class OAuth {
     constructor () {}
   
     register = (server, err, next) => {
       this.server = server
       this.registerRoutes()
     }
   
     registerRoutes = () => {}
   }  
   

这是如何运作的？当您将箭头函数与类属性插件一起使用时，它会转换为类似以下内容，并按照您使用时的预期进行绑定class syntax.

var OAuth = function OAuth() {
  var _this = this;

  _classCallCheck(this, OAuth);

  this.register = function (server, err, next) {
    _this.server = server;
    _this.registerRoutes();
  };

  this.registerRoutes = function () {};
}

2. 在构造函数中绑定类属性

   class OAuth {
     constructor () {
       // `this` is the OAuth instance in the constructor
       this.register = this.register.bind(this)
       this.registerRoutes = this.registerRoutes.bind(this)
     }
   
     register (server, err, next) {
       // `this` is the global object.. NOT! 
       // after binding in the constructor, it's the OAuth instance ^_^
       // provided you use `new` to initialize your instance
       this.server = server
       this.registerRoutes()
     }
   
     registerRoutes () {}
   }
   

3. Use createClass来自 React，它会为你进行绑定。请注意，我们仅使用 React 来实现其类属性绑定魔法。我们不是在创建反应组件。

   import React from 'react'
   
   const OAuth = React.createClass({
     register (server, err, next) {
       this.server = server
       this.registerRoutes()
     }
   
     registerRoutes () {}
   })
   

4. 仅供使用autoBind from 反应类 https://www.npmjs.com/package/react-class。这里我们使用 ES6+ 类语法制作一个 React 组件，只是为了使用autoBind方法。我们不必使用componentWillMount, render等，这些都带有react组件。

   import { autoBind } from 'react-class'
   
   class OAuth extends React.Component {
     constructor(props) {
       super(props)
       autoBind(this)
     }
   
     register (server, err, next) {
       this.server = server
       this.registerRoutes()
     }
   
     registerRoutes () {}
   }
   

5. 滚动你自己的类属性活页夹。这是一个很好的练习，基本上与选项 2 相同，可能代码也更少。

   // call it in your constructor
   bindStuff(this, ['register', 'registerRoutes', 'etc'])
   
   // define it somewhere as
   function bindStuff (context, props) {
     props.forEach(prop => {
       context[prop] = context[prop].bind(context);
     })
   }
   

6. 如果您确实想创建反应组件，您可以结合箭头函数和属性初始值设定项来执行类似的操作

   class OAuthComponent extends React.Component {
     whateverMethodYouWant = (event) => {
       this.setState({somePropertyYouCareAbout: true}) // this is bound
     }
   
     anotherMethod = () => {
       this.whateverMethodYouWant() // this is bound
     }
   }