Why does my ES6 (using Babel) class say `this` is undefined in an instance method?

问题

I am building an application in Node using Hapi.JS.

I have a class for an authentication plugin that is giving me all sorts of problems. When I attempt to reference this from within a method on the class, I get an error saying that this is undefined. Why is this happening?

An excerpt:

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();

Elsewhere this is being called like:

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

Every time the register function is called, I receive this error:

TypeError: Cannot set property 'server' of undefined

Why on earth is my instance not working?

回答1:

ES6 class with babel doesn't autobind this for you. This is a common misconception since class was introduced. There are multiple ways to solve it.

Use ES7. Babel has an experimental (as of this post) class-properties plugin.

class OAuth {
  constructor () {}

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

  registerRoutes = () => {}
}

How does this work? When you use arrow-functions along with the class-properties plugin, it gets transformed to something like the following, binding this as you expect when you use 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 () {};
}

Bind your class properties in the constructor

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 () {}
}

Use createClass from react, which does the binding for you. Note we're only using react for its class property binding magic. We are not creating react components.

import React from 'react'

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

  registerRoutes () {}
})

Use only autoBind from react-class. Here we're making a react component using ES6+ class syntax just to use the autoBind method. We don't have to use componentWillMount, render, etc, which are provided with react components.

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 () {}
}

Roll your own class property binder. It's a nice exercise, basically the same as option 2, possibly less code as well.

// 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);
  })
}

If you actually want to create react components, you can combine arrow-functions and property initializers to do something like

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

  anotherMethod = () => {
    this.whateverMethodYouWant() // this is bound
  }
}

来源：https://stackoverflow.com/questions/37490040/why-does-my-es6-using-babel-class-say-this-is-undefined-in-an-instance-metho

标签

javascript

node.js

ecmascript-6

babeljs

hapijs