Question

我有以下课程。它有一个bug，因为this.handlers（第2行）的引用与this.setTimeRange（第4行）中的不同

function Synchronized() {
    this.handlers = [];
    $("#masterSlider").rangeSlider();

    $("#masterSlider").bind("valuesChanging", function(e, data) {
        this.setTimeRange(data.values.min, data.values.max);
    });

}

Synchronized.prototype = {
    setTimeRange: function(lowerBound, upperBound) {
        console.log(lowerBound, upperBound);
        this.lowerBound = lowerBound;
        this.upperBound = upperBound;
        $("#masterSlider").rangeSlider("bounds", this.lowerBound, this.upperBound);
    },
}

如何从回调函数中调用类方法？

Answer 1

在进入回调并松开参考之前，应保存函数参考。所以一个解决方案是这样的：

   var self = this;
   $("#masterSlider").bind("valuesChanging", function(e, data) {
  self.setTimeRange(data.values.min, data.values.max);
 });

Answer 2

您有几种选择。最常见的三个：

创建一个变量来存储您可以关闭的this副本

var that = this;
$("#masterSlider").bind("valuesChanging", function(e, data) {
    that.setTimeRange(data.values.min, data.values.max);
});

在匿名函数上使用function.prototype.bind返回另一个具有指定值this的函数：

$("#masterSlider").bind("valuesChanging", (function(e, data) {
    this.setTimeRange(data.values.min, data.values.max);
}).bind(this));

使用ES6箭头功能代替匿名功能：

$("#masterSlider").bind("valuesChanging", (e, data) => this.setTimeRange(data.values.min, data.values.max));

在回调函数内调用类方法

2 个答案: