与对象结构

Question

我有这样的类结构（或多或少）未定义的变量问题：

function DataLoader = function() { 
    this.setup = function() { 
     this.page = new Page(); 
     this.page.setup(); 
    }; 

    Page = function() { 
     this.apiSelect = null; 
     this.onchangelistener = function() { 
      //---------------- look here --------------- 
      console.log(this.apiSelect); //Why is this.apiSelect undefined? 
      //---------------- look here --------------- 
     }; 

     this.setup = function() { 
      this.apiSelect = document.getElementById("foo"); 
      //This is also weird to me, I had to do it like this 
      //to get the functionality I wanted... 
      document.getElementById("foo").onchange = this.onchangelistener; 
     }; 
    }; 
}; 

var dl = new DataLoader(); 
dl.setup(); 

我很新的Javascript和现在不太多一些本质的坚韧不拔的细节还没有，但是这似乎对我来说很陌生。当onchange事件触发时，它会调用onchangelistener。为什么this.apiSelect未被发现？我的意思是我已经为它增加了一个价值。

我当前的代码看起来是这样的

Answer 1

... 
Page = function() { 
     var self = this; 
     this.apiSelect = null; 
     this.onchangelistener = function() { 
      console.log(self.apiSelect); 
     }; 

内部onchangelistener功能的this的引用不是在外部范围相同的this。所以，你需要创建一个到外this的引用（与var self = this;），并使用它的功能

Answer 2

Page = function() { 
     var apiSelect = null; 
     this.onchangelistener = function() { 
      console.log(apiSelect); 
     }; 
     ... 
}; 

这是怎么回事，因为this是被绑定到新的“内部”函数内部，它不知道是什么apiSelect数据成员得到了。