Angular 6 scoping fields within inner anonymous functions

Question

So I'm having some issues while using openlayers gaining access to my fields within the inner scopes of function calls like so.

  method() {
    this.myField.on('click', function (args) {
      this.myFieldThatIsntInScope(evt.pixel, function (args) {
      });
    });
  }

The second field of this.myFieldThatIsntInScope is the one in question where it appears to be out of scope, and then any fields within that function are also out of scope.

Is there a way to scope these in, I tried assigning the various fields into variables within the code blocks parent level but seems to cause issues with the mapping object from ol that I'm using.

Answer 1

An arrow function does not have its own this; the this value of the enclosing lexical context is used i.e. Arrow functions follow the normal variable lookup rules.

So while searching for this which is not present in current scope they end up finding this from its enclosing scope . Thus, in the following code, the this within the function that is passed to myFieldThatIsntInScope has the same value as this in the lexically enclosing function.

  method() {
    this.myField.on('click',
      (args) => { this.myFieldThatIsntInScope(evt.pixel, (args) => { });
    });
  }