JavaScript 变量在使用控制台单步执行时给出正确的值，但在其他情况下则不然

Question

我的 JavaScript 构造函数中有一个变量，当使用断点单步执行时，该变量似乎被设置为正确的值。但是，当没有断点运行时，变量（应该是我给它的数组）在控制台中显示为空数组。我不知道是否使用原型的 get/set 属性，如所述 这里。另外——我正在使用 webkit，所以如果有人可以帮助向我解释为什么它在那里不起作用，我将不胜感激。谢谢！

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

因此，经过一番摆弄，我发现boxes.push(inElement.childnodes[i]是有问题的行。当注释掉时，该值会按预期显示。

Answer 1

您将使用 shift 在 setrotation 内部的循环中删除数组中的所有元素。 JavaScript 中数组是通过引用传递的，而不是通过值传递的。如果您想创建数组的副本，则必须使用 Array.slice：

this._rotation = rotArray.slice();