javascript - 如何一次性创建图像元素及其属性？

Question

编辑:根据 Felix 的建议更改了问题和标题以反射(reflect)我的意图

我想做的是创建一个子对象“obj”，其工作方式如下:

upperMostObject.obj      //This is an image
upperMostObject.obj.src  //This is an attribute of the image

以及我希望能够创建它的方式，也就是说，我想要实现的是

var imgCollection = {
    catImage: document.createElement("img"),
    catImage: {
        src: "http://whatever.source.com/image.png",
        width: 30,
        height: 30,
    },
}

但前者，在本例中 catImage: document.createElement("img") 被覆盖。

Answer 1

您需要使用 String 对象(不是原始对象)，或者为您的对象定义一个自定义的 toString() 方法。

第一种方法:

var upperMostObject = {};
upperMostObject.obj = new String("topValue"); // as a String object
upperMostObject.obj.subObj = "subValue";

这是可行的，因为字符串原语不能保存属性，而 String 对象可以。

使用 String 对象时要小心，虽然您可以使用松散等号 (==) 进行比较，但您不能使用严格等号 (===)。此外，typeof someStringObject 将是 "object"，而不是 "string"。

第二种方法(可以“一次完成”):

var upperMostObject = {
    obj: {
        toString: function(){return "topValue"},
        subObj: "subValue"
    },
}

这是有效的，因为任何时候你将对象转换为字符串(例如 upperMostObject.obj == 'topValue')，它都会在内部调用它的 toString 方法。