javascript - javascript 和 jQuery 的嵌套对象函数中的变量范围

Question

我写了两个对象。一个称为 List，另一个称为 Car。

function Car()
{
  this.make="";
  this.year="";
}

function List()
{
  this.cars = [];
}

我还有另一个函数，它是List对象的方法，用于读取XML文件的信息，并将它们存储在List对象内的汽车数组中:

List.prototype.readXML = function()
{
  var i = 0;
  $.get('mydata.xml', function(xml){
    $(xml).find("item").each(function(){
      //Bug Point!!!
      this.cars.push(new Car()); //Push a Car object into array
      this.cars[i].ID = ($(this).attr("ID"));
     }); 
   });
 }

但是这行不通。每次调试都会告诉我汽车未定义...我尝试使用 var 而不是它来定义汽车。并尝试删除 this.cars.push 而不是 cars.push。但它仍然说汽车未定义。

我认为这个问题中的变量范围可能有问题。谁能教我怎么做吗？

谢谢!

Answer 1

问题出在你的jquery上

$.get('mydata.xml', function(xml){
    $(xml).find("item").each(function(){
      //Bug Point!!!
      this.cars.push(new Car()); //Push a Car object into array
      this.cars[i].ID = ($(this).attr("ID"));
     }); 
   });

this 并不指代您期望它指代的内容

解决此问题的常见方法是将其分配给名为 that 或 self 的不同变量

List.prototype.readXML = function()
{
  var i = 0;
  // Create a new variable called 'self' that you can refer to within different function scopes
  var self = this;
  $.get('mydata.xml', function(xml){
    $(xml).find("item").each(function(){
      self.cars.push(new Car()); //Push a Car object into array
      self.cars[i].ID = ($(this).attr("ID"));
     }); 
   });
 }

这意味着您可以访问您需要访问的原始 List 对象。此方法利用了闭包。

希望这有帮助

<小时/>

编辑解释评论中提出的问题:

List.prototype.readXML = function()
{
  // Create a new variable called 'self' that you can refer to within different function scopes
  var self = this;
  $.get('mydata.xml', function(xml){
    $(xml).find("item").each(function(i, domElem){
      var car = new Car();
      car.id = $(domElem).attr("ID");
      self.cars.push(car); //Push a Car object into array
     }); 
   });
 }