javascript, classes, promises, how to access an outside variable inside a then scope

Question

Within a javascript class function, I'm unable to access outside variables (and therefore this) within a then scope.

I've referred to this article as well as it's duplicates Object method with ES6 / Bluebird promises

I'm aware that the following is a valid solution for accessing the desired this inside of a then scope:

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

However, I can't seem to get it working this way inside the context of a class. Here is the class:

var outerestThis = 'foo'

export class Listener {
  start() {
    this.listenForSearch();
  }
  listenForSearch() {
    var outererThis = 'foo';

    const search = () => {
      var outerThis = 'foo';
      let artistName = $('#search-input').val();
      new ArtistSearch(artistName).fetch_and_render().then(function () {
        debugger;
          this.starListener();
      });
    }
    $('#search-button').click(function () {
      search();
    });

  });
  }

  starListener() {
    ...
  }
}

When I hit the debugger inside of const search() inside the then scope, I expect that I should be able to access outer varables (which I would change to outer this when I get things working). But, outerThis, outererThis and outerestThis are all undefined.

turn your “function(){“ to an arrow function (“()=>{“ cause in the function() syntax it gets it’s own scope. Your first example worked cause you didn’t use “this” — richard nelson, Mar 26 '19 at 16:16
have you tried using `()=>{}` notation instead of `function(){}` — Krzysztof Krzeszewski, Mar 26 '19 at 16:16
*"But, outerThis, outererThis and outerestThis are all undefined."* I highly doubt that's the case. Even if you use `= this;`, at least `outererThis` and `outerThis` will have a proper (and the same) value. — Felix Kling, Mar 26 '19 at 16:34
Switched to an arrow function. Still am not able to access my outside variables, which I don't understand. However, `this` is now referring to class, which is the behavior I needed. Thank you! — Benjamin Lee, Mar 26 '19 at 16:39
I bet it starts working once you actually change the code to refer to `outerThis`… — Bergi, Mar 26 '19 at 17:43

James M. Lay · Accepted Answer · 2019-03-26T17:09:03.517

The problem isn't that you can't access outside variables. Javascript is lexically scoped, which means that variables in outer scopes are always available within inner scopes (as in your example).

The real problem you're having is that this is being redefined within your function because functions defined using the function keyword have dynamic context (meaning the this keyword changes its meaning depending on its environment). What you want to do is preserve the meaning of this from the class into the function. There's many ways to do this.

You could reference this using another variable, say self:

  const self = this; //self will not be changed within the function
  new ArtistSearch(artistName).fetch_and_render().then(function () {
    debugger;
      self.starListener();
  });

You can also explicitly set the context using the bind property, as others have mentioned:

  new ArtistSearch(artistName).fetch_and_render().then((function() {
    debugger;
      this.starListener();
  }).bind(this));

The most concise way, however, is to use an arrow function. Arrow functions have lexically inherited context, meaning this within an arrow function will always mean whatever this meant in the area the function was defined.

  new ArtistSearch(artistName).fetch_and_render().then(() => {
    debugger;
      this.starListener();
  });

Hope this has been helpful!

javascript, classes, promises, how to access an outside variable inside a then scope

1 Answers1