JavaScript对象参数的引用传递


Posted in Javascript onJanuary 14, 2016

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

<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程序设计有所帮助。

Javascript 相关文章推荐
如何用javascript去掉字符串里的所有空格
Feb 08 Javascript
YUI的Tab切换实现代码
Apr 11 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
May 24 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
Jun 09 Javascript
JavaScript Length 属性的总结
Nov 02 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
Dec 05 Javascript
Vue实现计算器计算效果
Aug 17 Javascript
vue路由切换时取消之前的所有请求操作
Sep 01 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 #Javascript
AngularJS初始化静态模板详解
Jan 14 #Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
Jan 14 #Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 #Javascript
基于javascript实现随机颜色变化效果
Jan 14 #Javascript
JavaScript事件类型中UI事件详解
Jan 14 #Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
Jan 14 #Javascript
You might like
雄兵连:第三季确定会出,不过时间未定,鹤熙是第三季的主角!
2020/03/13 国漫
DC四月将推出百页特刊漫画 纪念小丑诞生80周年
2020/04/09 欧美动漫
PHP include_path设置技巧分享
2011/07/03 PHP
使用Linux五年积累的一些经验技巧
2013/06/20 PHP
PHP实现百度人脸识别
2019/05/06 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
AngularJS入门教程之控制器详解
2016/07/27 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
Python实现多线程HTTP下载器示例
2017/02/11 Python
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
Numpy掩码式数组详解
2018/04/17 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
Python运行DLL文件的方法
2020/01/17 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
思想汇报范文
2013/11/04 职场文书
留学生如何写好自荐信
2013/12/27 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
《月球之谜》教学反思
2014/04/10 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
教学督导岗位职责
2015/04/10 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
虚拟机linux端mysql数据库无法远程访问的解决办法
2021/05/26 MySQL
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL
电频谱管理的原则是什么
2022/02/18 无线电
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python