調用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 

    }); 
...