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

Question

>编辑：根据菲利克斯的建议更改了问题和标题以反映我的意图

我想做的是创建一个子对象"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 方法。

Answer 2

我想要实现的是...

这似乎是Object.assign的工作：

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

Object.assign将其他参数的属性复制到第一个参数并返回第一个参数。点击链接获取填充材料。