javascript - 从 html 元素调用函数时引用函数的类

Question

我有一个类，它在加载时将 eventListener 分配给 html 元素。单击该 html 元素时，它会调用同一类中的函数，如下所示:

class LiveViewController extends ViewController{

viewLoads(){
    $("#mydiv")[0].addEventListener("click",this.someFunction);
}

someFunction(){
    console.log(this);
}

}

问题是我想以某种方式在 someFunction 中引用类的实例，但“this”指的是元素本身。您建议采取什么方法来做到这一点？

Answer 1

当您指定一个函数用作 jQuery 中的事件处理程序时，该函数可以访问以 this 形式启动事件的原始 DOM 元素。因此，经典的解决方案是将处理程序内的类上下文作为 self 关闭:

class LiveViewController extends ViewController{

  viewLoads(){
    var self = this;
    $("#mydiv")[0].addEventListener("click", function() {
      self.someFunction(self);
    });
  }
  someFunction(context){
    console.log(context);
  }
}

您甚至根本不需要传递上下文:

class LiveViewController extends ViewController{

  viewLoads(){
    var self = this;
    $("#mydiv")[0].addEventListener("click", function() {
      self.someFunction();
    });
  }
  someFunction(){
    console.log(this);
  }
}

最后你可以使用.bind来绑定(bind)适当的上下文:

class LiveViewController{
  viewLoads(){
    $("#mydiv")[0].addEventListener("click", this.someFunction.bind(this));
  }
  someFunction(){
    console.log(this);
  }
}

要访问实例化对象和 dom 元素，您可以使用

class LiveViewController extends ViewController{

  viewLoads(){
    var self = this;
    $("#mydiv")[0].addEventListener("click", function() {
      self.someFunction(this);
    });
  }
  someFunction(element){
    console.log(this);
    console.log(element);
  }
}