JavaScript 对象与数组参数：引用传递陷阱与实践

晚来风

发布时间：2026-10-13| 4人浏览过

原创

JavaScript中的参数传递机制直接影响变量状态的作用域。理解引用传递不仅能解释为何修改对象属性能影响外部变量，还能避免直接赋值导致的逻辑错误。

结果与目标：区分传值与传引用

在处理函数参数时，开发者常遇到“修改参数后外部变量未变”的困惑。核心差异在于数据类型：

原始类型（如字符串、数字）：按值传递。函数内部的操作仅作用于副本。
引用类型（如对象、数组）：按引用传递。函数获得的是变量的内存地址，允许修改内部结构。

真实操作顺序：如何安全修改外部对象

第1步：验证数组参数的引用特性

当传入数组时，直接修改数组元素的值会同步到外部变量。

<script>
  var myname = ["wood"];
  A(myname);
  // 输出: "Yao"
  document.write(myname[0]);

  function A(n) {
    n[0] = "Yao"; 
    // 操作的是原数组的第一个元素，而非重新赋值数组引用
  }
</script>

第2步：验证对象参数的引用特性

同理，修改对象的属性也会反映到原变量上。

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

  function A(n) {
    n.name1 = "Yao"; 
    // 直接修改属性有效
  }
</script>

第3步：识别引用传递的陷阱（直接赋值无效）

若试图在函数体内对形参进行完全赋值（即改变其指向的内存地址），外部变量不会受影响。这是因为形参n本身只是一个局部变量，指向了新的对象，而外部的myname仍指向旧对象。

<script>
  var myname = {name1:"wood"};
  A(myname);
  // 输出: "wood" (未改变)
  document.write(myname.name1);

  function A(n) {
    n = {name1:"Yao"}; 
    // 这里创建了新的局部引用，切断了与原对象的连接
  }
</script>

完成判断与实战应用：时间格式化

基于对象引用的特性，我们可以构建无需返回值的辅助函数来修改状态。以下是一个使用setInterval配合对象参数处理时间格式化的示例。

<script>
  var mytime = self.setInterval(function() {
    getTime();
  }, 1000);

  function getTime() {
    var timer = new Date();
    var t = {
        h: timer.getHours(),
        m: timer.getMinutes(),
        s: timer.getSeconds()
      };
    
    // 直接将对象t传入函数，内部修改属性即可生效
    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>

该方案避免了接收返回值再赋值的冗余步骤，代码更简洁。注意：checkTime函数直接修改了传入对象i的属性，这些改动在getTime中依然有效。