By meshfields


2010-07-25 19:28:17 8 Comments

Given an Array Literal inside a JavaScript Object, accessing its own object's properties does not seem to work:

 var closure =  {

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

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


Whereas declaring an Array Item by accessing an other JavaScript Object seem to work

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


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

2 comments

@CMS 2010-07-25 19:42:43

The this value will not work like that, it refers to a value determined by the actual execution context, not to your object literal.

If you declare a function member of your object for example, you could get the desired result:

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

Since the this value, inside the getPicArray function, will refer to your closure object.

See this answer to another question, where I explain the behavior of the this keyword.

Edit: In response to your comment, in the example that I've provided, the getPicArray method will generate a new Array object each time it is invoked, and since you are wanting to store the array and make changes to it, I would recommend you something like this, construct your object in two steps:

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

Then you can modify the closure.picArray member without problems.

@meshfields 2010-07-26 01:14:06

Thanks! Excellent answer. How would you then modify the array persistently?

@CMS 2010-07-26 01:48:33

@Stephan, Thank you!. With my second example, you can simply use the picArray property, e.g. closure.picArray.push("foo");

@Anurag 2010-07-25 19:40:26

The this property does not point to the closure object. If we were to define the myPic property on the global scope, then you will see picArray initialized with that value. Consider this example:

<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 is one of the hardest concepts in JavaScript. You might like this article on the topic.

Related Questions

Sponsored Content

41 Answered Questions

[SOLVED] Loop through an array in JavaScript

41 Answered Questions

[SOLVED] How do I remove a property from a JavaScript object?

88 Answered Questions

[SOLVED] How do I remove a particular element from an array in JavaScript?

  • 2011-04-23 22:17:18
  • Walker
  • 6151418 View
  • 7678 Score
  • 88 Answer
  • Tags:   javascript arrays

43 Answered Questions

[SOLVED] Sort array of objects by string property value

47 Answered Questions

[SOLVED] How to check if an object is an array?

69 Answered Questions

[SOLVED] What is the most efficient way to deep clone an object in JavaScript?

19 Answered Questions

[SOLVED] Storing Objects in HTML5 localStorage

47 Answered Questions

33 Answered Questions

[SOLVED] For-each over an array in JavaScript?

16 Answered Questions

[SOLVED] How to insert an item into an array at a specific index (JavaScript)?

Sponsored Content