Javascript对象方法问题

Question

我正在尝试创建一个名为 List 的对象。这个对象有一个 add 方法，它简单地将一个任务对象插入这个任务数组。我还构建了一个加载方法来从 url 加载项目。

我的问题是我似乎无法从加载方法中引用添加方法，我收到以下错误:

未捕获的类型错误:对象 # 没有方法“添加”。

如何从加载方法中引用添加方法？我正在使用的代码如下。

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())，上下文将是 global 上下文——在浏览器中是 window 对象.这正是您的 Ajax 回调的情况。