jqueryウィジェットでgrepを使用すると「this」のスコープが変更されます

Question

私は、フィルタリングするデータを含む2つのグループのJSONデータと、フィルタの条件を表す第2のグループを持っています。

フィルタの構造はかなり基本的です。これは、フィルタリングしている要素の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; 
    } 

ます。また、関数スコープに、あなたのこれをバインドすることができます。

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