javascript - 在 jquery 小部件中使用 grep 时， "this"的范围发生变化

Question

我有两组 JSON 数据，一组包含我要过滤的数据，第二组代表过滤器的条件。

过滤器结构非常基本。它包含要过滤的元素的 ID 及其值。

另一个结构包含多个字段，包括与过滤器结构相关的 Id。

这两者都存储在小部件的全局部分中。通常，我会使用 this.filterData 或 this.jsonObjects 来访问它们。但是，如果我尝试使用 grep 或 javascript array.filter 函数进行过滤，则“this”会发生变化，因此我无法再访问数据。有办法解决这个问题吗？

    applyFilters: function() {
        //var returnedData = $.grep(this.options.jsonObjects, this.grepFunction);
        var returnedData = this.options.jsonObjects.filter(this.filterMatch);
        filteredData = returnedData;
        this.options.onFilterApply.call(this);
    },

    filterMatch: function(element) {
        for(var key in this.filterData) {
            if(this.filterData.hasOwnProperty(key)) {
                for(var a = 0; a < this.filterData[key].values.length; a++) {
                    if(element[this.filterData[key].id]==this.filterData[key].values[a]) {
                        return true;
                    }
                }
            }
        }
        return false;
    }

希望这是有道理的。在 applyFilters 函数中，“this”代表小部件本身，并且它工作正常。但是一旦进入filterMatch函数，“this”就变成了窗口，所以this.filterData是未定义的。我如何访问该函数内的 filterData，或者最终过滤 JSON 对象列表的最佳方法是什么？

Answer 1

在进入filterMatch函数之前，您可以将范围保存在变量中。 类似于:

var that = this;

    applyFilters: function() {
        //var returnedData = $.grep(this.options.jsonObjects, this.grepFunction);
        var returnedData = this.options.jsonObjects.filter(this.filterMatch);
        filteredData = returnedData;
        this.options.onFilterApply.call(this);
    },

    filterMatch: function(element) {
        for(var key in that.filterData) {
            if(that.filterData.hasOwnProperty(key)) {
                for(var a = 0; a < that.filterData[key].values.length; a++) {
                    if(element[that.filterData[key].id]==that.filterData[key].values[a]) {
                        return true;
                    }
                }
            }
        }
        return false;
    }

您也可以将 this 绑定(bind)到函数作用域。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind