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修改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中最難的概念之一。 您可能喜歡這篇文章 。