Question

我有一个类，在init方法中我设置了一个点击事件，在那个事件中我想在课堂上调用一个方法，我无法弄清楚如何做到这一点或者如果它甚至可能。这里的代码显示了我尝试的结构。在类init（）函数中，在ajax返回后我设置了一个click事件，并且在该回调中我想调用class的classFn（）函数。我试过绑定这个，我已经尝试过self = this和绑定那个，箭头功能（我没想到会起作用，但我认为我试一试）等等。

class MyClass {
  constructor() {
   this.a = '';
  }

  init() {
    ....
    $.getJSON(url, function(data) {
      $(mySelector).click(function() {
        classFn();
      });
    });
  }

  classFn() {
    ....
  }
}

Answer 1

function更改了this的含义。解决问题的一种方法是使用bind。但是，您必须使用它两次，因为您有两层function。解决它的一种简单方法是使用箭头函数，它不会更改this：

class MyClass {
  constructor() {
   this.a = '';
  }

  init() {
    ....
    $.getJSON(url, (data) => {
      $(mySelector).click(() => {
        this.classFn();
      });
    });
  }

  classFn() {
    ....
  }
}

Answer 2

您需要绑定回调函数并调用this.classFn()。您可以使用.bind或arrow function

class MyClass {
  constructor() {
   this.a = '';
   this.init = this.init.bind(this);
  }

  init() {
    ....
    $.getJSON(url, function(data) {
      $(mySelector).click(function() {
        this.classFn();
      }.bind(this));
    }.bind(this));
  }

  classFn() {
    ....
  }
}

或

class MyClass {
  constructor() {
   this.a = '';
  }

  init = ()  => {   // class fields are stage-2 proposal with es6
    ....
    $.getJSON(url,(data) =>  {
      $(mySelector).click(()  => {
        this.classFn();
      });
    });
  }

  classFn() {
    ....
  }
}

ES6：如何从回调函数调用类函数

2 个答案: