Passing by reference of JavaScript object parameters_javascript tips

I encountered a problem today, how to affect 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, which means that when myname is passed into function A, there is equivalent to a copy of myname in the function body. The value of this copy is equal to myname. The subsequent operations performed on it in the function body are based on this copy. carried out.

But the situation is different. When the parameters passed in are arrays and objects, changes made to the parameters in the function body will be 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 above code.

The following 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 can be clearly seen that the changes to the parameters in the function body affect the original variables, which is qualitatively different from the usual parameter passing. Special attention is required.

But, when assigning a value to the passed array or object inside the function body, this change will not be reflected in the original variable outside the function body!

Please see:

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

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

According to the theory that changes within the function above 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 were a bit hard to swallow.

The reason is that when the assignment operation is used in the function body, the system creates a variable named p. This p is a variable inside the function. Of course, assigning a value to it only works within the function body. The myname outside is still the original myname.

The only difference between this step and the original code is whether to assign new values ​​to the parameters within the function body or to change the attributes of the parameters or the elements of the array.

Below we use the method of passing objects to re-implement an example of clock digital formatting output:

<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()
      }
      //将时间对象t，传入函数checkTime()，直接在checkTime()中改变对象中的值。
      //而无需再去接收返回值再赋值
    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 call the refresh event regularly, or it can also be implemented by using setTimeout() to call recursively in getTime().

The above is the entire content of this article. I hope it will be helpful to everyone in learning javascript programming.