Question

在javascript类函数中，我无法访问then范围内的外部变量（因此this）。

我已经提到了这篇文章，以及它的重复文章Object method with ES6 / Bluebird promises

我知道以下是在then范围内访问所需this的有效解决方案：

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

但是，我似乎无法在类的上下文中使它以这种方式工作。这是课程：

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() {
    ...
  }
}

当我在then范围内的const search（）内部调试器时，我希望我应该能够访问外部变量（当工作正常时，我将其更改为外部this）。但是，outerThis，outererThis和outerestThis都是未定义的。

Answer 1

问题不在于您无法访问外部变量。 Javascript具有词法范围，这意味着外部范围内的变量始终在内部范围内可用（如您的示例）。

您遇到的真正问题是，在函数中重新定义了skip_before_action :check_user, only: [:destroy, :create]，因为使用this关键字定义的函数具有动态上下文（这意味着function关键字的含义取决于的环境）您要做的是将this的含义从类保留到函数中。有很多方法可以做到这一点。

您可以使用另一个变量this来引用this：

self

您还可以使用const self = this; //self will not be changed within the function new ArtistSearch(artistName).fetch_and_render().then(function () { debugger; self.starListener(); });属性来显式设置上下文，就像其他人提到的那样：

bind

但是，最简洁的方法是使用箭头功能。箭头函数具有词法继承的上下文，这意味着箭头函数中的new ArtistSearch(artistName).fetch_and_render().then((function() { debugger; this.starListener(); }).bind(this));始终表示定义该函数的区域中的this。

this

希望这对您有所帮助！

javascript，类，promise，如何在then范围内访问外部变量

1 个答案: