代码之家 › 专栏 › 技术社区 › kombat

ES6:如何从回调函数调用类函数[重复]

es6-class this ecmascript-6 javascript

kombat · 技术社区 · 7 年前

我有一个类,在init方法中,我正在设置一个click事件,在该事件中,我想调用该类上的一个方法,但我不知道如何做,或者是否可能。下面的代码显示了我正在尝试的内容的结构。在classes init()函数中,在ajax返回后,我将设置一个click事件,并在该回调中调用该类的classFn()函数。我试过绑定这个,我试过self=this和binding that,箭头函数(我没想到会起作用,但我想我会试试),等等。

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

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

  classFn() {
    ....
  }
}

2 回复 | 直到 7 年前

Aurel Bílý 7 年前

function 更改的含义 this . 解决此问题的一种方法是使用 bind . 但是,您必须使用它两次,因为您有两层 作用 . 解决这个问题的一个简单方法是使用箭头函数,它不会改变 这 :

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

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

  classFn() {
    ....
  }
}

Shubham Khatri 7 年前

您需要绑定回调函数并调用 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() {
    ....
  }
}

推荐文章

Udders · 使用另一个数组中的值按索引从数组中删除

2 年前

Matt · 获取数组长度并推入每个对象

3 年前

Rahmouni Rabii · 尝试访问数组中的对象时未定义

3 年前

Brian Patterson · Javascript自定义数组。原型方法日志“未定义”

3 年前

dapidmini · 未捕获的承诺嵌套异步函数承诺错误处理

3 年前

Arka Bhattacharjee · 如何在JavaScript中反转大写的字符串?[重复]

3 年前

Zeeps Wear · 如何按键对对象进行分组?

3 年前

Kevin Giraldo · 如何更改字符串或数字在JavaScript中转换类的方式?

3 年前

Rachel · 如何按ID从JSON对象数组中删除数组元素

3 年前

minsu123 · 如何解析react中的单个引用?

3 年前