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 相关文章推荐
juqery 学习之三 选择器 简单 内容
Nov 25 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
jQuery仿Excel表格编辑功能的实现代码
May 01 Javascript
使用Chrome浏览器调试AngularJS应用的方法
Jun 18 Javascript
JS+CSS实现闪烁字体效果代码
Apr 05 Javascript
PhotoSwipe异步动态加载图片方法
Aug 25 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
Vue 短信验证码组件开发详解
Feb 14 Javascript
JavaScript轮播图简单制作方法
Feb 20 Javascript
原生JS中slice()方法和splice()区别
Mar 06 Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 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
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
非常全面的php日期时间运算汇总
2015/11/04 PHP
php时间函数用法分析
2016/05/28 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
jquery validate 自定义验证方法介绍 日期验证
2014/02/27 Javascript
javascript动态创建表格及添加数据实例详解
2015/05/13 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
2016/07/14 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
微信小程序缓存过期时间的使用详情
2019/05/12 Javascript
JS使用正则表达式提交页面验证的代码
2019/10/16 Javascript
JS highcharts实现动态曲线代码示例
2020/10/16 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
Python常见工厂函数用法示例
2018/03/21 Python
在Python 字典中一键对应多个值的实例
2019/02/03 Python
pyqt5 QlistView列表显示的实现示例
2020/03/24 Python
Python之变量类型和if判断方式
2020/05/05 Python
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
寒假家长评语大全
2014/04/16 职场文书
实习证明格式范文
2014/10/14 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python
pytorch model.cuda()花费时间很长的解决
2021/06/01 Python