JavaScript variables giving the correct value when stepped through using the console, but not otherwise

I have a variable in a JavaScript constructor that ap开发者_如何学编程pears to be set to the correct value when stepped through using breakpoints. However, when run without breakpoints, the variable (supposed to be an array that I give it), comes up as an empty array in the console. I don't know whether or not using the get/set property of prototype, as described here. Also-- I'm working in webkit, so if someone could help explain to me why it isn't working there, I'd appreciate it. Thanks!

function Box(inElement){
    var self = this;
    this.element = inElement;
    this.boxes = (function () {
        var boxes = [];
        for (var i = 0; i < inElement.childNodes.length; ++i) {
            if (3 !== inElement.childNodes[i].nodeType) {
                boxes.push(inElement.childNodes[i]);
            }
        }
        return boxes;
    })();
    this.rotation = [-40,-20,0,20,40];
}

Box.prototype = 
{   
    get rotation(){
    return this._rotation;
    },

    set rotation(rotArray){

        console.log('rotArray');
        console.log(rotArray);

        var thisrot;
        this._rotation = rotArray;
        for(var i=0; i<this.boxes.length; i++){
            thisrot = rotArray.shift();
            this.boxes[i].style.webkitTransform = 'rotateY(' + thisrot + 'deg) translateZ(170px)';
        } 
    }
}

function loaded()
{
    new Box(document.getElementById('area'));
}

window.addEventListener('load',loaded, true);

So, after some fiddling, I discovered that boxes.push(inElement.childnodes[i] is the problematic line. When commented out, the value comes out as expected.

You are removing all elements from your array in the loop inside of set rotation using shift. Arrays are passed by reference in JavaScript, not by value. If you want to create a copy of your array, you will have to use Array.slice:

this._rotation = rotArray.slice();