Javascript ECMA6基本,变量未在ajax中定义

Question

试着写一个简单的类来更新一个javascript列表.

  class ep_List {

     constructor()
     {
        this.urlForAjax ='';
        this.dataList=[];
        this.dataJson='';
        this.dataParams={};
     }

     getData(method,params,url)
     {
       this.urlForAjax = url;
       this.dataParams=params;

       if(method=='get')
        this.callGetAjax();
      else
        this.callPostAjax();
     }

     callPostAjax()
     { 
        $.post(this.urlForAjax,this.dataParams,this.setList(res));
     }

     callGetAjax()
     {
        $.get(this.urlForAjax,this.setList(res));
     }

     setList(res)
     {
        console.log(res);
        this.dataList =res;
     }

  }

  class gasFilter extends ep_List {


    displayList()
    {
        //console.log(this.dataList);
      $.each(this.dataList,function(val){
         console.log('sss');
      });
    }
  }

var gasObj = new gasFilter();

gasObj.getData('get','','mapper/?mtc=101');

我收到错误了

未捕获的ReferenceError:在HTMLFocument的gasFilter.getData(app.js [sm]:140)的gasFilter.callGetAjax(app.js [sm]:140)中未定义res.(app.js [sm]:140)at j(jquery-3.1.1.min.js:2)at k(jquery-3.1.1.min.js:2)

欢迎提出建议

谢谢

Answer 1

您需要$ .post和$ .get的成功参数作为回调函数,因此请尝试将其更改为以下内容:

 callPostAjax()
 { 
    $.post(this.urlForAjax,this.dataParams, res => this.setList(res));
 }

 callGetAjax()
 {
    $.get(this.urlForAjax, res => this.setList(res));
 }

您可以跳过箭头功能,如果您使用this.setList.bind(this)它的位置.诀窍是你需要this正确设置.setList().您可能希望了解有关bind和箭头函数如何影响范围的更多信息.

此外,您需要在第二个类中使用this.dataList,而不仅仅是dataList.

这是您的代码的工作,修改版本.

class ep_List {

     constructor()
     {
        this.urlForAjax ='';
        this.dataList=[];
        this.dataJson='';
        this.dataParams={};
     }

     getData(method,params,url)
     {
       this.urlForAjax = url;
       this.dataParams=params;

       if(method=='get')
        this.callGetAjax();
      else
        this.callPostAjax();
        
      // Added to I could chain a call to .displayList()
      return this;

     }
     
     getFakeData(cb)
     {
       let data = [1,2,3]
       cb(data)
     }

     callPostAjax()
     { 
        this.getFakeData(this.setList.bind(this));
     }

     callGetAjax()
     {
        this.getFakeData(this.setList.bind(this));
     }

     setList(res)
     {
        console.log(res);
        this.dataList = res;
        console.log({dataList: this.dataList})
     }

  }

  class gasFilter extends ep_List {


    displayList()
    {
      // Gotta make sure you call this.dataList
      this.dataList.forEach(function(val){
         console.log('sss');
      });
    }
  }

var gasObj = new gasFilter();

gasObj.getData('get','','mapper/?mtc=101').displayList();