'this' is undefined in JavaScript class methods
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);
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);
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))
}
}