Javascript ECMA6 basic，在ajax中未定义变量

尝试编写一个简单的类来更新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');

我得到的错误是

未捕获引用错误：未定义res 在gasFilter.callGetAjax（app.js[sm]：140） 在gasFilter.getData（app.js[sm]：140） 在HTMLDocument。（app.js[sm]：140） 在j处（jquery-3.1.1.min.js:2） 在k处（jquery-3.1.1.min.js:2）

欢迎提出建议

---

谢谢

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

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

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

如果使用

this.setList.bind（this）

，则可以跳过箭头函数。诀窍是您需要在

.setList（）

中正确设置

此

。您可能想了解更多关于如何影响范围的信息

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

这是您的代码的一个工作、修改版本

class-ep\u列表{
构造函数（）
{
this.urlForAjax=''；
this.dataList=[]；
this.dataJson=''；
this.dataParams={}；
}
getData（方法、参数、url）
{
this.urlForAjax=url；
this.dataParams=params；
if（方法=='get'）
这是callGetAjax（）；
其他的
this.callPostAjax（）；
//添加到我可以链接到.displayList（）的调用
归还这个；
}
getFakeData（cb）
{
设数据=[1,2,3]
cb（数据）
}
callPostAjax（）
{ 
this.getFakeData（this.setList.bind（this））；
}
callGetAjax（）
{
this.getFakeData（this.setList.bind（this））；
}
设置列表（res）
{
控制台日志（res）；
this.dataList=res；
console.log（{dataList:this.dataList}）
}
}
类气体过滤器扩展ep_列表{
显示列表（）
{
//一定要打电话给这个，数据列表
this.dataList.forEach（函数（val）{
console.log（'sss'）；
});
}
}
var gasObj=新的气体过滤器（）；
gasObj.getData（'get'，''，'mapper/？mtc=101'）.displayList（）您的问题是您正在立即执行此.setList（res）

。您要做的是将函数作为参数发送

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

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

正在使用未定义的变量res调用函数。您需要按照james的建议使用回调传递jquery的get，或者只是删除调用括号

$.get(this.urlForAjax,this.setList.bind(this));

---

.bind以与双箭头函数相同的方式维护此范围。

因此，对于其他来到这里的人来说，这是工作代码

  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.bind(this));
     }

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

     setList(res)
     {

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



  }

  class gasFilter extends ep_List {


    displayList()
    {
        var that = this;
        setTimeout(function() {
            // Gotta make sure you call this.dataList
            that.dataList.forEach(function(val){
                console.log(val);
            });
        }, 3000);

    }
  }

var gasObj = new gasFilter();

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

---

关于此错误，您不了解什么？在

callPostAjax

和

callGetAjax

中，您使用的是未定义的

res

变量。@jamesKraus谢谢，它起了作用，但我正在尝试更新我的setList（）函数中的数据列表，但当我尝试在子类中访问它时，它仍然显示空列表是的，您需要引用这个.dataList。我修改了您的代码并在上面添加了它。我尝试了您的想法，但在子类中它仍然是一个空列表，我认为这是Ajax的问题，因此当我在DisplayList（）函数中创建控制台日志时，它首先返回callGetAjax（）的控制台日志。我通过在DisplayList（）中添加3秒的setTimeout来修复它 function@Vikram出现问题的原因是$.get（）操作是异步的，但displayList（）是同步调用的。您可以通过从回调内部调用displayList（）（例如在setList（）的末尾）或通过使用promise操作重新构造来修复此问题。但基本上，您正在尝试在服务器返回响应之前使用数据列表。如果服务器的响应时间超过3秒，超时并不是一个很好的解决方案。这只是另一个问题，所以当我尝试在回调setList方法中设置

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();
     }

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

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

     setList(res)
     {

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



  }

  class gasFilter extends ep_List {


    displayList()
    {
        var that = this;
        setTimeout(function() {
            // Gotta make sure you call this.dataList
            that.dataList.forEach(function(val){
                console.log(val);
            });
        }, 3000);

    }
  }

var gasObj = new gasFilter();

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