JavaScript对象参数的引用传递

198 阅读 0 评论 131 点赞

我是靠谱客的博主精明小蝴蝶，最近开发中收集的这篇文章主要介绍JavaScript对象参数的引用传递，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

今天碰到一个问题，怎样把参数变更影响到函数外部，如：

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

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

输出结果还是wood，说明当myname传入A函数后，在函数体内，相当于有一个myname的副本，这个副本的值等于myname，之后在函数体内对其做的操作是在这个副本上进行的。

但情况有所不同，当传入的参数是数组、对象时，在函数体内对参数所做的更改会反映到原变量上。

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

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

可以看出，上面代码中已经把friut数组的第一个元素更改了。

下面是关于对象的例子：

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

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

可以很明显地看到函数体内对参数的改动影响到了原来的变量，这与通常情况下的传参有质的区别了。需要特别注意。

But，当在函数体内对传入的数组或对象赋值时，这个更改不会反映到函数体外的原变量身上！

请看：

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

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

按照上面函数内部的更改会反映到原变量的理论，你肯定觉得执行完A()后myname变量的name1属性的值已经变成'Yao'了吧。但结果让人有点难以接受。

原因在于，当在函数体内使用赋值操作时，系统就创建了一个变量名为p的变量。这个p是函数内部的变量，对它进行赋值当然只在函数体内起作用，外面的myname还是原来的myname。

这一步与原来代码的操作差别仅在于在函数体内是对参数赋新值呢还是对参数的属性或数组的元素进行更改。

下面我们用传递对象的方式，重新实现一个时钟数字格式化输出的例子：

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

例子使用setInterval()函数定时调用刷新事件，也可以用setTimeout()在getTime()中递归调用来实现。

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。