JavaScript:在Array Literal中访问自己的Object属性

Question

给定JavaScript对象中的Array Literal,访问其自己的对象的属性似乎不起作用:

 var closure =  {

         myPic : document.getElementById('pic1'),
         picArray: [this.myPic]
 }    

 alert(closure.picArray[0]); // alerts [undefined]

而通过访问其他JavaScript对象来声明一个数组项似乎有效

 ?var closure1 = {
 ?    
 ?     myPic : document.getElementById('pic1')
 ?}
 ?    
 ?var closure2 =  {
 ?  
 ?        picArray: [closure1.myPic]
 ?}    
 ?    
 ?alert(closure2.picArray[0]); // alerts [object HTMLDivElement]

示例:http: //jsfiddle.net/5pmDG/

Answer 1

该this值不会像那样工作,它指的是由实际执行上下文确定的值,而不是您的对象文字.

例如,如果声明对象的函数成员,则可以获得所需的结果:

var closure =  {
  myPic: document.getElementById('pic1'),
  getPicArray: function () {
    return [this.myPic];
  }
};
//...
closure.getPicArray();

由于函数this内部的值getPicArray将引用您的closure对象.

请参阅另一个问题的答案,其中我解释了this关键字的行为.

编辑:为响应您的注释,在我提供的示例中,该getPicArray方法将在每次调用时生成一个新的Array对象,并且由于您希望存储该数组并对其进行更改,我建议您像这样的东西,分两步构建你的对象:

var closure =  {
  myPic: document.getElementById('pic1')
};
closure.picArray = [closure.myPic];

然后您可以closure.picArray毫无问题地修改该成员.