JavaScript：访问数组文字中自己的对象属性

Question

给定 JavaScript 对象内的数组文字，访问其自身对象的属性似乎不起作用：

 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();

因为 getPicArray 函数内的 this 值将引用您的 闭包对象。

请参阅另一个问题的此答案，其中我解释了 this 关键字。

编辑：为了回应您的评论，在我提供的示例中，getPicArray 方法将在每次调用时生成一个新的 Array 对象，并且因为您想要存储数组并对其进行更改，我建议您这样做，分两步构建对象：

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

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

Answer 2

this 属性不指向 closure 对象。如果我们要在全局范围内定义 myPic 属性，那么您将看到使用该值初始化的 picArray。考虑这个例子：

<script>
window.myPic = "Global myPic";

var closure =  {
    myPic : document.getElementById('pic1'),
    picArray: [this.myPic] // this refers to the global object
};

console.log(closure.picArray); // ["Global myPic"];
</script>

this 是 JavaScript 中最难的概念之一。您可能会喜欢这篇关于该主题的文章。