Javascript将字符串转换为递归变量

我想用html5/canvas制作一个游戏

这是我第一次尝试，想法很基本

我们将图像作为图像对象保存在ImageRepository中

我们不希望手动设置每个图像，如

newimage（）

---

我们如何使用多层对象来实现这一点呢？

首先，我要分离数据集

var repo = {
    background: "img/background.jpg",
    planets: {
        earth: "img/planets/earth.png",
        moon: "img/planets/moon.png"
    },
    ships: {
        fighter: "img/ships/fighter.png"
    },
    bullets: {
        fighter: {
            single: "img/bullets/fighter/single.png"
        }
    }
}

function ImageRepository(repo) {

    // save a copy of this scope
    var _this = this;

    // use this recursive function to iterate over nested objects
    // it's an immediately invoked function into which the repo
    // object is passed. Note that this needs to be a named function.
    // Also note that the new function creates a new scope which is
    // why we needed to save the original scope to a new variable to use later
    var loop = function loop(obj) {

       // loop over the object
       for (var p in obj) {

            // if the 'node' is an object, pass the object
            // back to the recursive function
            if (typeof obj[p] === 'object') {
              loop(obj[p]);
            } else {

              // otherwise add the new images
              _this[p] = newImage();
              _this[p].src = obj[p];
            }
        }
    }(repo);
}

通过将repo传递给构造函数来创建新的图像集：

var imageset = new ImageRepository(repo);

---

使用控制台日志显示结果，而不是创建实际图像，但它应该显示发生了什么。

使用此数据结构有什么意义？为什么不使用一个简单的数组来存储所有图像url？我不会使用循环来解析所有这些数据结构，因为您需要为游戏的特定部分初始化所有图像。此外，URL似乎也没用，因为您可以用对象的名称重新创建它们，这正是我所需要的：）谢谢@R.CanserYanbakan，我已经更新了我的代码，因为我的原始答案可能存在范围问题。如果有，这会解决问题。这里出现的问题是，在尝试使用图像之前，您不知道图像是否已正确加载。图像加载是异步的，所以您还需要一种机制来处理它（即onload）。

var repo = {
    background: "img/background.jpg",
    planets: {
        earth: "img/planets/earth.png",
        moon: "img/planets/moon.png"
    },
    ships: {
        fighter: "img/ships/fighter.png"
    },
    bullets: {
        fighter: {
            single: "img/bullets/fighter/single.png"
        }
    }
}

function ImageRepository(repo) {

    // save a copy of this scope
    var _this = this;

    // use this recursive function to iterate over nested objects
    // it's an immediately invoked function into which the repo
    // object is passed. Note that this needs to be a named function.
    // Also note that the new function creates a new scope which is
    // why we needed to save the original scope to a new variable to use later
    var loop = function loop(obj) {

       // loop over the object
       for (var p in obj) {

            // if the 'node' is an object, pass the object
            // back to the recursive function
            if (typeof obj[p] === 'object') {
              loop(obj[p]);
            } else {

              // otherwise add the new images
              _this[p] = newImage();
              _this[p].src = obj[p];
            }
        }
    }(repo);
}

var imageset = new ImageRepository(repo);