调用Java脚本类中的方法相同类

Question

我试图使自己的类，以便维持可能是一个容易得多内，但我有问题，这是我的代码：

var SonalScript = function() { 
console.log('instance created'); 
    this.AjaxCall = function(url,data){ 
     $.post(url,data,function(data,status){ 
      alert("Data: " + data + "\nStatus: " + status); 
      }); 
} 

this.Switches = function(ElemIdentifier) { 
    $(ElemIdentifier).bootstrapSwitch(); 
    $(ElemIdentifier).on('switchChange.bootstrapSwitch', function(event, state) { 
     // console.log($(this).get('name')); 
     var ModuleName = $(this).attr("name"); 
     var name = $(this).data("name") ; 
     var BtnValue = $(this).data("value") ; 
     var url = $(this).data("addr") ; 
     var BtnResult = ''; 
     if (state) { 
     // data-addr 
     // data-name 
     // data-value 
     // result = True Or False 
     BtnResult = 'True'; 
     // alert('Enabling : ' + ModuleName); 

     } else { 
     BtnResult = 'False'; 
     // alert('Disabling : ' + ModuleName); 
     } 

     // alert(result); 

     var data = { name:BtnValue , result : BtnResult }; 
     console.log(data); 
     console.log(url); 
     this.AjaxCall(url,data); // << Problem is exactly this line 

    }); 
    } 


}; 

SonalUtil = new SonalScript(); 

当我试图调用： this.AjaxCall（url，data）; 然后我在控制台中得到这个错误：

Uncaught TypeError: undefined is not a function 

你觉得呢？是什么导致了错误？

Answer 1

有两种方法可以解决这个问题，一个是将this绑定到回调函数，另一个是将this放入回调函数的关闭上下文中。因此，第一种方法是：

... 
this.Switches = function(ElemIdentifier) { 
    $(ElemIdentifier).bootstrapSwitch(); 
    $(ElemIdentifier).on('switchChange.bootstrapSwitch', function(event, state) { 
     ... 
    }.bind(this)); 
    } 
... 

而第二个是

.... 
var self = this; 
$(ElemIdentifier).on('switchChange.bootstrapSwitch', function(event, state) { 
     // console.log($(self).get('name')); 
     var ModuleName = $(self).attr("name"); 
     var name = $(self).data("name") ; 
     var BtnValue = $(self).data("value") ; 
     var url = $(self).data("addr") ; 
     var BtnResult = ''; 
     if (state) { 
     // data-addr 
     // data-name 
     // data-value 
     // result = True Or False 
     BtnResult = 'True'; 
     // alert('Enabling : ' + ModuleName); 

     } else { 
     BtnResult = 'False'; 
     // alert('Disabling : ' + ModuleName); 
     } 

     // alert(result); 

     var data = { name:BtnValue , result : BtnResult }; 
     console.log(data); 
     console.log(url); 
     self.AjaxCall(url,data); // << Problem is exactly this line 

    }); 
...