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]

Example: http://jsfiddle.net/5pmDG/

- Stephan - Shiftcloud

---

可能是对象字面声明中的自引用的重复问题。 - Bergi

Answer 1

this 值不会像那样工作，它指的是由实际执行上下文确定的值，而不是你的对象字面量。

例如，如果你在对象中声明一个函数成员，你可以得到所需的结果：

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

在 getPicArray 函数中，this 值将会引用你的 closure 对象。

参见这个回答，我在那里解释了this 关键字的行为。

编辑： 根据你的评论，在我提供的示例中，每次调用 getPicArray 方法都会生成一个新的数组对象。由于你想要存储该数组并对其进行更改，我建议您像这样构建您的对象：

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

那么你可以毫无问题地修改 closure.picArray 成员。

- Christian C. Salvadó

---

谢谢！非常好的答案。那么你如何永久地修改数组？ - Stephan Kristyn

@Stephan，谢谢！对于我的第二个例子，你可以直接使用picArray属性，例如：closure.picArray.push("foo"); - Christian C. Salvadó

Answer 2

this属性并不指向闭包对象。如果我们在全局范围内定义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中最难的概念之一。您可能会喜欢关于此主题的文章。

- Anurag