Вызов метода внутри класса 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 

    }); 
...