javascript - 将对象添加到扩展数组的 JS 集合中(继承？)

Question

注意:是的，有类似的问题，但我在将集合传递到函数中时遇到问题。

$j = jQuery.noConflict();

// objects.json shows: {"objects": ["hello", "hi", "yo"]}

function ObjectCollection() {

}

ObjectCollection.prototype = [];


ObjectCollection.prototype.fetch = function() {
 var parent = this;
 $j.getJSON("objects.json", function(data) {
     $j.each(data.objects, function(i, customObject) {
        var myCustomObject = new CustomObject(customObject);
        parent.push(myCustomObject);
     });

     console.log(parent); // array exists

 });
      console.log(parent); // its gone!

};


function CustomObject(name) {
    this.name = name;
}

function doSomethingWithCollection(objectCollection) {
    this.objectCollection = objectCollection;
    this.objectCollection.fetch();
    console.log(this.objectCollection); // shows object collection with object in console
    console.log(this.objectCollection.length); // equals 0?? should be 3!
    this.objectCollection.forEach(function(object) {
        // it wont iterate
        console.log(object);


    });
}
var collection = new ObjectCollection;
// if i uncomment the next two lines, the code will work
// var object = new CustomObject('myName');
// collection.push(object);
doSomethingWithCollection(collection);

编辑...好吧，我的问题是这样的:https://jsfiddle.net/qd42fknL/

请不要推荐插件。我想创建我自己的对象收集器。

我的代码出了什么问题？

我做了一个 fiddle ...

如果我使用函数外部的对象启动集合..它将起作用，所以这是一个继承问题。这是怎么回事？

Answer 1

编辑

我意识到问题根本不在于继承。这里的问题是，您正在发送一个 ajax 请求，并且在它实际完成之前，您正在执行 console.log。因此，这会产生错误的结果。

有两种解决方案可以克服这个问题。

1. 使用同步ajax请求(但不推荐)
2. 首先等待异步 ajax 请求完成。

这是一个使用异步 ajax 调用的可行解决方案。

$j = jQuery.noConflict();

function ObjectCollection() { }
ObjectCollection.prototype = [];

ObjectCollection.prototype.fetch = function(callback) {
    var parent = this;
    $j.getJSON("objects.json", function(data) {
        $j.each(data.objects, function(i, customObject) {
            var myCustomObject = new CustomObject(customObject);
            parent.push(myCustomObject);
        });

        callback(); // notify request is completed
   });
};

function CustomObject(name) {
    this.name = name;
}

function doSomethingWithCollection(objectCollection) {
    this.objectCollection = objectCollection;
    var that = this;

    this.objectCollection.fetch(function () {

        // do this only after ajax finishes 
        console.log(that.objectCollection);
        console.log(that.objectCollection.length);
        that.objectCollection.forEach(function(object) {
            console.log(object);
        });
    });
}

var collection = new ObjectCollection;
doSomethingWithCollection(collection);

这是 fiddle https://jsfiddle.net/qd42fknL/2/