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

Question

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?

Does console.log(this); output anything of interest? Try that log in the constructor as well just cause? — bradj, May 27 '16 at 18:25
Is `oauth.register(server);` the only place where you call this method? — Bergi, May 27 '16 at 18:26
You never should use a `class` and export a singleton "module object". Either export the class itself, or use an object literal instead. — Bergi, May 27 '16 at 18:27
I attempted to export the singleton as a result of this issue. Even when I export the class an instantiate it elsewhere, the problem remains — Brennan, May 27 '16 at 18:27
@Bergi While it's a better practice I don't see why this wouldn't work. The fact that `this` would be `undefined` is even more odd. — plalx, May 27 '16 at 18:28
@Brennan I tested your class on `https://babeljs.io/` and it works just fine. It seems that there is a bug in your js engine or something like that... You should really try to debug by putting break-points if you have an IDE that supports it. — plalx, May 27 '16 at 18:31
@plalx: The recommendation about the exports was unrelated to `this` issue (that's why it's a comment not an answer). Of course, exporting a single object would allow to directly [refer to a variable instead of `this`](http://stackoverflow.com/q/10711064/1048572), but that's only a workaround. — Bergi, May 27 '16 at 21:57

creativehandle · Accepted Answer · 2017-02-10T16:05:02.483

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
  }
}

I believe you can also use the "@babel/plugin-transform-classes" which doesn't require you to change anything.. Such a stupid class implementation though — Tofandel, Mar 08 '22 at 13:06

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

1 Answers1

Linked