'this' is undefined in JavaScript class methods

Question

I'm new to JavaScript. New as far as all I've really done with it is tweaked existing code and wrote small bits of jQuery.

Now I'm attempting to write a "class" with attributes and methods, but I'm having trouble with the methods. My code:

function Request(destination, stay_open) {
    this.state = "ready";
    this.xhr = null;
    this.destination = destination;
    this.stay_open = stay_open;

    this.open = function(data) {
        this.xhr = $.ajax({
            url: destination,
            success: this.handle_response,
            error: this.handle_failure,
            timeout: 100000000,
            data: data,
            dataType: 'json',
        });
    };

    /* snip... */

}

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

    }
};
//all console.log's omitted

The problem is, in Request.prototype.start, this is undefined and thus the if statement evaluates to false. What am I doing wrong here?

I had a similar question here: http://stackoverflow.com/questions/3198264/javascript-how-do-i-retain-a-reference-to-a-request-initiator-in-a-handler in which there are a bunch of helpful links. The crux of it is that `this` in JavaScript is _not_ a constant reference to the 'owner' of a prototypal function being called, like it would be in most OO languages like Java. — Marc Bollinger, Oct 25 '10 at 04:01
@Matt: Request is a constructor function. Request.prototype defaults to `new Object()`. Anything you add to it automatically becomes properties of objects created using `new Request()`. — Chetan S, Oct 25 '10 at 04:02
@Matt Ball `Request.prototype` is where instances of `Request` inherit from. In this case it is probably `Function` or `Object`. — xj9, Oct 25 '10 at 04:04
@Chetan and @indie: I know how prototypes work in JavaScript, but I'm asking about _this_ object's prototype. Perhaps the OP has not shown all the code. — Matt Ball, Oct 25 '10 at 04:10
Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — Michael Freidgeim, May 08 '19 at 09:10

Chetan S · Accepted Answer · 2010-10-25T04:08:05.623

75

How are you calling the start function?

This should work (new is the key)

var o = new Request(destination, stay_open);
o.start();

If you directly call it like Request.prototype.start(), this will refer to the global context (window in browsers).

Also, if this is undefined, it results in an error. The if expression does not evaluate to false.

Update: this object is not set based on declaration, but by invocation. What it means is that if you assign the function property to a variable like x = o.start and call x(), this inside start no longer refers to o. This is what happens when you do setTimeout. To make it work, do this instead:

 var o = new Request(...);
 setTimeout(function() { o.start(); }, 1000);

edited Oct 25 '10 at 04:08

answered Oct 25 '10 at 03:57

Chetan S

22,610
2
60
78

I am using setTimeout: `var listen = new Request(destination, stay_open); setTimeout(listen.start, 500);` – Carson Myers Oct 25 '10 at 04:01
This saved my life, upon trying to understand why the function I was passing to express' [basicAuth](https://www.npmjs.com/package/express-basic-auth) was not working with the same output. – Edison Spencer May 22 '20 at 12:23
Or do `o.start.bind(o)`. Why doesn't `x = o.start; x()` work? – theonlygusti Nov 12 '20 at 14:14
`.bind()` returns a new function, not working in-place. So you'd have to do `x = o.start.bind(o); x()` or `o.start = o.start.bind(o); x=o.start; x()` – ceedob Dec 07 '20 at 13:53

score 60 · Answer 2 · answered Nov 26 '19 at 22:50

60

I just wanted to point out that sometimes this error happens because a function has been used as a high order function (passed as an argument) 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);

answered Nov 26 '19 at 22:50

EliuX

7,605
4
35
37

3

Good explanation !! That was exactly what I was looking for. – vandersondf Dec 19 '19 at 17:12
1

there is no telling how much headache you just saved me – Native Coder Oct 23 '20 at 03:41
1

Why does the scope of `this` get lost? – theonlygusti Nov 12 '20 at 14:14
Good question! I hope this helps: https://eliux.github.io/javascript/common-errors/why-this-gets-undefined-inside-methods-in-javascript/ – EliuX Jan 28 '21 at 03:32
Thanks. This is the correct anwer! Why isn't this accepted? – user1511417 Mar 15 '21 at 12:04
This happens a lot in Modules, which have no 'this' by default... you have to make a `this`, typically an instance of somebody's daughter – Ray Foss May 06 '21 at 23:03

score 18 · Answer 3 · answered Oct 25 '10 at 04:23

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)

score 5 · Answer 4 · answered Mar 12 '16 at 20:21

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.

You should bind the function to this in the constructor. Otherwise you're binding it every time `render` is called instead of once when the class is instantiated. Also, most of your example is not really relevant to the question. — erich2k8, Apr 20 '18 at 02:10

score 3 · Answer 5 · answered May 12 '21 at 04:30

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

  // ... yada yada ...
}

score 1 · Answer 6 · answered Dec 17 '20 at 10:15

1

Use arrow function:

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

    }
};

answered Dec 17 '20 at 10:15

Kasra

531
4
21

score 0 · Answer 7 · answered Sep 07 '20 at 17:13

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

'this' is undefined in JavaScript class methods

7 Answers7

Linked

Related