JavaScript对象方法问题

Question

我正在尝试创建一个名为List的对象。 该对象具有add方法，该方法将任务对象简单地推送到此任务数组。 我还构建了一个加载方法来从URL加载项目。

我的问题是我似乎无法从load方法中引用add方法，但出现以下错误：

未捕获的TypeError：对象＃没有方法“添加”。

如何从load方法中引用add方法？ 我正在使用的代码如下。

function List(){
    this.tasks = new Array();
    this.add = function(taskItem){
        this.tasks.push(taskItem);
    };
    this.load = function(url){
        $.getJSON(
            url,
            function(data){
                $.each(data, function(key,val){
                    var task = new Task({
                        id:val.pkTaskId,
                        title:val.fldName,
                        status:val.fldStatus
                    });
                    this.add(task);
                });
            }
            );
    }
}

var userList = new List();
userList.load(url)

Answer 1

尝试这个：

function List(){
    this.tasks = [];  // prefer [] over new Array()
    this.add = function(taskItem){
        this.tasks.push(taskItem);
    };
    this.load = function(url){
        var self = this;
        $.getJSON(
            url,
            function (data){
                $.each(data, function(key,val){
                    var task = new Task({
                        id:val.pkTaskId,
                        title:val.fldName,
                        status:val.fldStatus
                    });
                    self.add(task);
                });
            }
        );
    }
}

问题在于， this不是您认为的Ajax回调中的内容。 回调函数不是在对象的上下文中被调用，它被称为在全球范围内（所以this将指向window对象）。

事先保存对象引用（按照惯例称为self ）是必要的。

---

this并不总是指向函数“属于”的对象实例。 实际上，函数并不像其他语言那样属于对象。 this保持了调用函数的上下文 。可以在任何上下文中调用任何函数：

function A() {
  this.val = "foo";
  this.say = function () { alert( "A: " + this.val ); };
}

function B() {
  this.val = "bar";
  this.say = function () { alert( "B: " + this.val ); };
}

function test() { alert( "T: " + this.val ); }

var a = new A(), b = new B();

a.say()         // alerts "A: foo"
b.say()         // alerts "B: bar"
b.say.call(a);  // alerts "B: foo";      (.call() switches the context)
test()          // alerts "T: undefined" (val does not exist in window)
test.call(b)    // alerts "T: bar"       (Ah!)

除非你隐式地定义上下文（ b.say()意味着this将是b ）或明确（通过call()或apply()上下文将是全球范围内-这在一个浏览器的window对象。 您的Ajax回调就是这种情况。

Answer 2

jQuery Ajax回调的上下文是一个对象，代表用于发出Ajax请求的选项。 即，传递给$.ajax(options)调用的options对象与$.ajaxSettings合并。 您可以通过设置context选项来覆盖context 。 这意味着调用$.ajax()而不是$.getJSON() 。

$.ajax({
    context: this,
    url: url,
    dataType: 'json',
    success: callback
});

Answer 3

使用以下语法：

function List() {
    this.tasks = new Array();
}

List.prototype.add = function(taskItem) {
    this.tasks.push(taskItem);
}

var list = new List();
list.add(…);

另外，尝试提高您的接受率，人们会更愿意为您提供帮助。

Answer 4

要以Tomalak的答案为基础，可以将“ self”的声明移到主要对象级别。 在嵌套对象函数中使用它的情况下，这已被证明非常有用。

function List(){
   var self = this;
   self.tasks = new Array();
   self.add = function(taskItem){
      self.tasks.push(taskItem);
   };
   self.load = function(url){
      $.getJSON(
        url,
        function(data){
            $.each(data, function(key,val){
                var task = new Task({
                    id:val.pkTaskId,
                    title:val.fldName,
                    status:val.fldStatus
                });
                self.add(task);
            });
        });
    }
}

var userList = new List();
userList.load(url);