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

时间:2014-12-08 19:02:21

标签: javascript object

编辑:改变问题和标题以反映我的意图,根据费利克斯的建议

我想要做的是创建一个子对象" 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")会被覆盖。

2 个答案:

答案 0 :(得分:9)

您需要使用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方法。

答案 1 :(得分:2)

  

我想要实现的目标是......

这似乎是Object.assign的工作:

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

Object.assign将其他参数的属性复制到第一个参数并返回第一个参数。点击polyfill的链接。