javascriptpromiseangular-promise

javascript, promises, how to access variable this inside a then scope


I want to be able to call a function inside the .then scope, and for that I use the this.foo() manner. But if I do this inside the .then I get an error, since this appears to be lost. What can I do?

In this code, this would be equivalent to have the same output for the object this

console.log(this)
one().then(function() {
  console.log(this)
})

function one() {
  var deferred = $q.defer();
  deferred.resolve()
  return deferred.promise;
}

This neither seems to work

console.log(this)
var a = this;
one().then(function(a) {
  console.log(a)
})

Solution

  • Your second code example is the right way to go. Because the scope changes in the new function, this changes too, so you're right to make a reference to this outside of the function.

    The reason it failed is because the function is using a that you passed into the function rather than the global a you defined outside it.

    In other words:

    var a = this;
    
    one().then(function () {
      console.log(a)
    });
    

    Update: use an arrow function - they borrow the context (this) from their outer scope.

    function two() {
      console.log('Done');
    }
    
    one().then(() => {
      this.two();
    });
    
    function one() {
      return new Promise(res => {
        setTimeout(() => res(), 2000);
      });
    }