为什么类变量在javascript中抛出未定义？

Question

我有一个类，构造函数和一些函数，如下所示。在我的getData函数中，我看到在进行api调用后就填充了this.data，但是到达showData函数this.data时是不确定的。我在这里想念什么？

(function(){
  class foo{
   constructor (){
     this.data=[]; 
     this.btn = document.getElementById("btn")
     this.btn.addEventlistener('click', this.showData);
     this.getData(); 
   }
   getData(){
       $.ajax({
         url : 'someapi',
         type:'get',
         datatype : 'application/json',
         success : (results) => {
             this.data = results;
         }
       ); 
   }
   showData(){
      $.each(this.data, (item) => {
         console.log(item); 
      });
   }
  }
  new foo(); 
})();