尝试在JavaScript中复制通过引用行为：如何适当地修改我的代码

Question

So I have 2 functions that I was hoping would work together to bounce an object around a div. I'm using a graphics library, so there will be some unfamiliar pieces of code below. I think you'll still understand the gist of what I'm trying to do.

function homepage_screensaver()
{
    /*
        Create Raphael object in the space of the div with id "homeandidiv"
    */
    var pappos = $("#homeanidiv").position();  
    var papx = pappos.left;
    var papy = pappos.top;
    var papheight = $("#homeanidiv").height();
    var papwidth = $("#homeanidiv").width();
    var paper = Raphael(papx, papy, papwidth, papheight);
    /*
        paper: space in which the circle will be bound
    */
    var circx = Math.floor(Math.random() * Number.MAX_VALUE) % papwidth;
    var circy = Math.floor(Math.random() * Number.MAX_VALUE) % papheight;
    /*
        circx, circy: initial positions of circle on the paper
    */
    var mycirc = paper.circle(circx, circy, 10);
    mycirc.attr("fill","#F9C624");
    var theta = Math.floor(Math.random() * Number.MAX_VALUE) % 4 + 1; 
    /*
        theta = 1 <---> object moving at a 45-degree angle
        theta = 2 <---> object moving at a 135-degree angle
        theta = 3 <---> object moving at a 225-degree angle
        theta = 4 <---> object moving at a 315 degree angle
    */
    var circwrapper = new Array(mycirc, theta);
    window.setInterval(function() { move_obj(circwrapper, papwidth, papheight);}, 100);
}

function move_obj(obwrap, backwidth, backheight)
{
     var ob = obwrap[0]; // object 
     var th = obwrap[1]; // theta, the current direction of the object
     var BB = ob.getBBox(); // bounding box for object
     var dx = 0;
     var dy = 0;
     if (BB.x >= backwidth && (th == 1 || th == 2)) 
            dx = -1;
     else if (BB.x <= 0 && (th == 3 || th == 4))
            dx = 1;

     if (BB.y >= backheight && (th == 2 || th == 3))
            dy = -1;
     else if (BB.y <= 0 && (th == 1 || th == 4))
            dy = 1;

     ob.transform("T " + dx + ", " + dy);
     if (dx == 1 && dy == -1)
        th = 1;
     else if (dx == 1 && dy == 1)
        th = 2;
     else if (dx == -1 && dy == 1)
        th = 3;
     else // (dx == -1 && dy == -1)
        th = 4;

     obwrap[0] = ob;
     obwrap[1] = th;
}

Here's the problem that I've realized after testing my page: my function move_obj(...) is not actually affecting the first parameter I'm passing to it. You can see at the end of my function that I have

  obwrap[0] = ob;
  obwrap[1] = th;

indicating that I'm trying to actually modify values of the array that is passed in as the first parameter.

Is there any "quick fix" to my problem? I would prefer not to go back and try to make things global variables.

Just so you know, I have researched the issue of passing by reference in JS and here it says that arrays are passed by reference: http://orizens.com/wp/topics/javascript-arrays-passing-by-reference-or-by-value/ . So I don't see what's going wrong here.

Answer 1

You have to do the reassignment after the "move" function returns.

window.setInterval(function() {
  var wrapper = [mycirc, theta];

  move_obj(wrapper, papwidth, papheight);

  mycirc = wrapper[0];
  theta = wrapper[1];
}, 100);

Assigning new values to the array works but it only affects the array. When you build the array, you're making copies of the values of the two variables. There's no subsequent implicit relationship between the array slots and the variables, so changes to the array have no effect on the values of the independent variables.