javascript - Javascript类在console.log中返回不同的值

我有以下课程（在此处省略了不必要的详细信息以使其更具可读性）：

class CollectionManager {
constructor(){
    this.collectionList = {};
}
initialize(collections){
    ...
}
populate(){
    var collectionObjs = Object.keys(this.collectionList).map(function(key){
        return collectionManager.collectionList[key];
    });
    return Promise.all(collectionObjs.map(function(collection){
        collection.populateVideos();
    }));
}
}

。

class Collection {
constructor(data){
    this.collectionInfo = data;
    this.videoArray = [];
}
populateVideos(){
    var collectionKey = this.collectionInfo.COLLECTIONID;
    var vChannels = Object.keys(this.collectionInfo.channels);
    return Promise.all(vChannels.map(requestVideos))
        .then(function (results) {
            var videoIdArray = [];
            return videoIdArray = [].concat.apply([], results);
        }).then(function(arrVideoIds){
            var groups = [];
            for (var i = 0; i < arrVideoIds.length; i += 50) {
                groups.push(arrVideoIds.slice(i, i + 50));
            }
            return groups;
        }).then(function(chunkedArrVideoIds){
            return Promise.all(chunkedArrVideoIds.map(requestVideoData)).then(function (results) {
                var videoTileArray = [].concat.apply([], results);
                collectionManager.collectionList[collectionKey].videoArray = videoTileArray;
                return videoTileArray;
            });
        });
}
displayCollection(){
    console.log(this.collectionInfo.COLLECTIONID);
    console.log(collectionManager.collectionList);
    console.log(collectionManager.collectionList[1]);
    console.log(collectionManager.collectionList[1].videoArray);

我称这些类就像我通常会答应的那样。

collectionManager.populate().then(
    function(){
        collectionManager.displayCollections()
    }
);

现在我的问题是，当我调用此代码并读取控制台上的内容时，videoArray在第四个控制台日志中完全为空。 collectionManager.collectionList[1]包含一个完整的对象，该对象的videoArray的长度为100，我的所有视频都正确地放在其中。但是，如果我呼叫collectionManager.collectionList[1].videoArray，则它为空，就像尚未填充一样。据我所知，这些人应该称呼相同的确切地点，但结果却不一样。

有人看到我搞砸了吗？

最佳答案

在populate函数中，您的Promise.all ...映射返回一个未定义的数组，这将由Promise.all立即解决。

你应该做如下

populate(){
    var collectionObjs = Object.keys(this.collectionList).map(function(key){
        return collectionManager.collectionList[key];
    });
    return Promise.all(collectionObjs.map(function(collection){
        return collection.populateVideos();
    }));
}

但是，当您使用Class时-您已经在使用更现代的javascript

所以

populate(){
    var collectionObjs = Object.keys(this.collectionList).map(key => collectionManager.collectionList[key]);
    return Promise.all(collectionObjs.map(collection => collection.populateVideos()));
}

完全可以接受

顺便说一句，（我认为）您的class Collection也可以使用箭头功能变得更整洁，并更好地实现诺言链

class Collection {
    constructor(data) {
        this.collectionInfo = data;
        this.videoArray = [];
    }
    populateVideos() {
        var collectionKey = this.collectionInfo.COLLECTIONID;
        var vChannels = Object.keys(this.collectionInfo.channels);
        return Promise.all(vChannels.map(requestVideos))
        .then(results => [].concat.apply([], results))
        .then(arrVideoIds => {
            var groups = [];
            for (var i = 0; i < arrVideoIds.length; i += 50) {
                groups.push(arrVideoIds.slice(i, i + 50));
            }
            return groups;
        )
        .then(chunkedArrVideoIds => Promise.all(chunkedArrVideoIds.map(requestVideoData)))
        .then(function(results) {
            var videoTileArray = [].concat.apply([], results);
            collectionManager.collectionList[collectionKey].videoArray = videoTileArray;
            return videoTileArray;
        });
    }
    displayCollection() {
        console.log(this.collectionInfo.COLLECTIONID);
        console.log(collectionManager.collectionList);
        console.log(collectionManager.collectionList[1]);
        console.log(collectionManager.collectionList[1].videoArray);
    }
}