Why is 'this' undefined inside class method when using promises?

Question

I have a javascript class, and each method returns a Q promise. I want to know why this is undefined in method2 and method3. Is there a more correct way to write this code?

function MyClass(opts){
  this.options = opts;

  return this.method1()
    .then(this.method2)
    .then(this.method3);
}

MyClass.prototype.method1 = function(){
  // ...q stuff...

  console.log(this.options); // logs "opts" object

  return deferred.promise;
};

MyClass.prototype.method2 = function(method1resolve){
  // ...q stuff...

  console.log(this); // logs undefined

  return deferred.promise;
};

MyClass.prototype.method3 = function(method2resolve){
  // ...q stuff...

  console.log(this); // logs undefined

  return deferred.promise;
};

I can fix this by using bind:

function MyClass(opts){
  this.options = opts;

  return this.method1()
    .then(this.method2.bind(this))
    .then(this.method3.bind(this));
}

But not entirely sure why bind is necessary; is .then() killing this off?

When you use bind() it creates another function with exactly the scope you will pass by params. Although It answers just your last question, take a look at the Mozila's documentation: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Function/bind — Eduardo Henrique, Jan 21 '16 at 17:56
In 8 words, explain how the heck is [this](http://stackoverflow.com/questions/34930771/why-is-this-undefined-inside-class-method-when-using-promises) a duplicate of [that](http://stackoverflow.com/questions/591269/settimeout-and-this-in-javascript)? I just had this exact same question come up, which would _not_ have been answered by [that](http://stackoverflow.com/questions/591269/settimeout-and-this-in-javascript). I know [that](http://stackoverflow.com/questions/591269/settimeout-and-this-in-javascript) already, but I'm coming to terms with promises, ES6 Classes, and `this`. — 4Z4T4R, Mar 22 '17 at 18:07
@Paulpro not so sure this should be marked as a duplicate of the [`setTimeout` issue](http://stackoverflow.com/questions/591269/settimeout-and-this-in-javascript); as the problem arises in two completely different ways. People looking to resolve their `this` scoping issues in the context of promises are immediately being pointed to a more indirect question, where the accepted answer uses anti-patterns from 2009. `2 + 2 = 4` !== `((8+2)*6)/15 = 4` — SteamDev, May 23 '17 at 19:21
IMO definitely shouldn't be marked as a duplicate especially to a question about timeouts. This question specifically about Promises and the answers are a god send. Thank you. — Unknownweirdo, Sep 13 '18 at 10:41

lex82 · Accepted Answer · 2017-05-22T10:14:47.337

183

this is always the object the method is called on. However, when passing the method to then(), you are not calling it! The method will be stored somewhere and called from there later. If you want to preserve this, you will have to do it like this:

.then(() => this.method2())

or if you have to do it the pre-ES6 way, you need to preserve this before:

var that = this;
// ...
.then(function() { that.method2() })

edited May 22 '17 at 10:14

answered Jan 21 '16 at 17:51

lex82

11,173
2
44
69

10

great answer - or pre-ES6 ".then(this.method2.bind(this))" – Philip Murphy Jan 12 '17 at 14:23
9

I used `.then(data => this.method(data))` – mateos Oct 22 '17 at 07:05
1

FAR FAR easyer way: .then(( foo = this) => {... //then use foo instead of this [also translates to the pre-es6 version] Just make sure it's not overwridden! – Hobbamok Sep 27 '18 at 12:18
underrated explanation, struggled with this quite a bit when setting up promises, now fixex. thanks – Remus.A Jan 04 '20 at 12:20

Joseph · Answer 2 · 2016-01-21T17:58:01.630

25

Promise handlers are called in the context of the global object (window) by default. When in strict mode (use strict;), the context is undefined. This is what's happening to method2 and method3.

;(function(){
  'use strict'
  Promise.resolve('foo').then(function(){console.log(this)}); // undefined
}());

;(function(){
  Promise.resolve('foo').then(function(){console.log(this)}); // window
}());

For method1, you're calling method1 as this.method1(). This way of calling it calls it in the context of the this object which is your instance. That's why the context inside method1 is the instance.

edited Jan 21 '16 at 17:58

answered Jan 21 '16 at 17:52

Joseph

117,725
30
181
234

2

Now **this** is an answer **that** helped me to understand **it**. – Volmarg Reiso Aug 11 '21 at 16:07

score 7 · Answer 3 · answered Jan 21 '16 at 17:53

Basically, you're passing it a function reference with no context reference. The this context is determined in a few ways:

Implicitly. Calling a global function or a function without a binding assumes a global context.*
By direct reference. If you call myObj.f() then myObj is going to be the this context.**
Manual binding. This is your class of functions such as .bind and .apply. These you explicitly state what the this context is. These always take precedence over the previous two.

In your example, you're passing a function reference, so at it's invocation it's implied to be a global function or one without context. Using .bind resolves this by creating a new function where this is explicitly set.

*This is only true in non-strict mode. In strict mode, this is set to undefined.

**Assuming the function you're using hasn't been manually bound.

score 1 · Answer 4 · answered Jan 21 '16 at 17:51

One way functions get their context (this) is from the object on which they are invoked (which is why method1 has the right context - it's invoked on this). You are passing a reference to the function itself to then. You can imagine that the implementation of then looks something like this:

function then( callback ) {

  // assume 'value' is the recently-fulfilled promise value
  callback(value);
}

In that example callback is a reference to your function. It doesn't have any context. As you've already noted you can get around that by binding the function to a context before you pass it to then.

Why is 'this' undefined inside class method when using promises?

4 Answers4

Linked

Related