The JavaScript object parameter is passed by reference

  • 2020-12-07 03:57:37
  • OfStack

I encountered a problem today, how to affect the parameter changes outside the function, such as:


<script>
  var myname = "wood";
  A(myname);
  document.write(myname);

  function A(n) {
    n = "Yao";
  }
</script>

The output result is still wood, indicating that when myname is passed into the A function, there is equivalent to 1 copy of myname in the body of the function, the value of which is equal to myname, and then the operation on it in the body of the function is carried out on this copy.

But the situation is different. When the parameters passed in are arrays or objects, the changes made to the parameters in the function body are reflected in the original variables.


<script>
  var myname = ["wood"];
  A(myname);
  document.write(myname[0]);

  function A(n) {
    n[0] = "Yao";
  }
</script>

As you can see, the first element of the friut array has been changed in the code above.

Here is an example of an object:


<script>
  var myname = {name1:"wood"};
  A(myname);
  document.write(myname.name1);

  function A(n) {
    n.name1 = "Yao";
  }
</script>

It is obvious that the parameter changes in the body of the function affect the original variable, which is qualitatively different from the normal parameter transfer. Special attention is required.

But, when assigning values to arrays or objects in the body of the function, this change is not reflected in the original variables outside of the function!

Please look at:


<script>
  var myname = {name1:"wood"};
  A(myname);
  document.write(myname.name1);

  function A(n) {
    n = {name1:"Yao"};
  }
</script>

Based on the theory above that changes within the function will be reflected in the original variable, you must think that the value of the name1 attribute of the myname variable has changed to 'Yao' after executing A(). But the results are a bit hard to accept.

The reason is that when you use an assignment inside the function body, you create a variable called p. This p is a variable inside the function, so assignment to it is of course only in the body of the function, so myname outside is the same as myname.

The only difference between this step and the original code is whether you assign a new value to a parameter in the body of the function or make a change to an attribute of the parameter or an element of the array.

Let's re-implement an example of clock number formatting output by passing an object:


<script>
  var mytime = self.setInterval(function() {
    getTime();
  }, 1000);
  //alert("ok");
  function getTime() {
    var timer = new Date();
    var t = {
        h: timer.getHours(),
        m: timer.getMinutes(),
        s: timer.getSeconds()
      }
      // Time object t , pass in the function checkTime() Directly in checkTime() Change the value in the object. 
      // You don't have to receive the return value and assign it 
    checkTime(t);
    document.getElementById("timer").innerHTML = t.h + ":" + t.m + ":" + t.s;
  }

  function checkTime(i) {
    if (i.h < 10) {
      i.h = "0" + i.h;
    }
    if (i.m < 10) {
      i.m = "0" + i.m;
    }
    if (i.s < 10) {
      i.s = "0" + i.s;
    }
  }
</script>

The example uses the setInterval() function to periodically call the refresh event, or setTimeout() can be used to recursively call in getTime().

That is the end of this article, I hope you learn javascript programming help.


Related articles: