JavaScript: доступ к собственному свойству объекта внутри Array Literal

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

Поскольку значение this внутри функции getPicArray будет ссылаться на ваш closure объект.

См. 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.Вам может понравиться эта статья по теме.