'this' is undefined in JavaScript class methods

I just wanted to point out that sometimes this error happens because a function has been passed as an argument to a high order function and then the scope of this got lost. In such cases, I would recommend passing such function bound to this. E.g.

this.myFunction.bind(this)

In addition, a lambda function works:

(args) => this.myFunction(args)

None of the previous answers had the full solution for me, so posting mine here.

I had a class, which was returning an error when I ran forEach on the method reference.

e.g.

class Foo {
  hello (name) {
    return `hello ${name}`
  }

  doGreet (name) {
    return console.log(this.hello(name)) // <- 'this' is undefined
  }
}

// print some names...
const foo = new Foo();
(['nick', 'john']).forEach(foo.doGreet)

// TypeError: Cannot read property 'hello' of undefined
//     at doGreet (/.../test.js:7:17)

The solution was to the bind the context of the method's this within a constructor. i.e.

class Foo {
  constructor () {
    this.doGreet = this.doGreet.bind(this) // <- Add this
  }

  hello (name) {
    return `hello ${name}`
  }

  doGreet (name) {
    return console.log(this.hello(name))
  }
}

JavaScript's OOP is a little funky (or a lot) and it takes some getting used to. This first thing you need to keep in mind is that there are no Classes and thinking in terms of classes can trip you up. And in order to use a method attached to a Constructor (the JavaScript equivalent of a Class definition) you need to instantiate your object. For example:

Ninja = function (name) {
    this.name = name;
};
aNinja = new Ninja('foxy');
aNinja.name; //-> 'foxy'

enemyNinja = new Ninja('boggis');
enemyNinja.name; //=> 'boggis'

Note that Ninja instances have the same properties but aNinja cannot access the properties of enemyNinja. (This part should be really easy/straightforward) Things get a bit different when you start adding stuff to the prototype:

Ninja.prototype.jump = function () {
   return this.name + ' jumped!';
};
Ninja.prototype.jump(); //-> Error.
aNinja.jump(); //-> 'foxy jumped!'
enemyNinja.jump(); //-> 'boggis jumped!'

Calling this directly will throw an error because this only points to the correct object (your "Class") when the Constructor is instantiated (otherwise it points to the global object, window in a browser)

Use arrow function:

Request.prototype.start = () => {
    if( this.stay_open == true ) {
        this.open({msg: 'listen'});
    } else {

    }
};

In ES2015 a.k.a ES6, class is a syntactic sugar for functions.

If you want to force to set a context for this you can use bind() method. As @chetan pointed, on invocation you can set the context as well! Check the example below:

class Form extends React.Component {
constructor() {
    super();
  }
  handleChange(e) {
    switch (e.target.id) {
      case 'owner':
        this.setState({owner: e.target.value});
        break;
      default:
    }
  }
  render() {
    return (
      <form onSubmit={this.handleNewCodeBlock}>
        <p>Owner:</p> <input onChange={this.handleChange.bind(this)} />
      </form>
    );
  }
}

Here we forced the context inside handleChange() to Form.

This question has been answered, but maybe this might someone else coming here.

I also had an issue where this is undefined, when I was foolishly trying to destructure the methods of a class when initialising it:

import MyClass from "./myClass"

// 'this' is not defined here:
const { aMethod } = new MyClass()
aMethod() // error: 'this' is not defined

// So instead, init as you would normally:
const myClass = new MyClass()
myClass.aMethod() // OK

If a function has been used as a high order function (passed as an argument) the scope of this gets lost.

To fix this problem one can bind this to the function like @Eliux described:

this.myFunction.bind(this);

To automate this process like @DanielTonon wanted you can do this in the constructor:

Object.getOwnPropertyNames(YourClass.prototype).forEach((key) => {
  if (key !== 'constructor') {
    this[key] = this[key].bind(this);
  }
});

I was getting this error while passing a catch-handler for a promise.

class foo {

   catchHandler(error){
     // do something with this
   }
  
   async myFunction(){
       let x = await somePromise.catch(this.catchHandler);
   }
}

I was trying to bind the catchHandler-Function to this and i still got the error. What finally fixed it for me was not just pass the function as an argument but using a arrow-Function as a 'wrapper':

class foo {

   constructor(){
     this.catchHandler.bind(this); // <--
   }

   catchHandler(error){
     // do something with this
   }
  
   async myFunction(){
      --> let x = await somePromise.catch(e => this.catchHandler(e)); // <--
   }
}

This might not help OP but when you encounter the problem as stated in the Question-Header