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，数据）; 然后我在控制台中遇到了这个错误：

 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

    });
...

从同一个类中的另一个方法调用java-script类中的方法

1 个答案: