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 相关文章推荐
JS动态添加option和删除option(附实例代码)
Apr 01 Javascript
js实现文字在按钮上滚动的方法
Aug 20 Javascript
深入理解js promise chain
May 05 Javascript
JS本地刷新返回上一页代码
Jul 25 Javascript
angularjs 中$apply,$digest,$watch详解
Oct 13 Javascript
打通前后端构建一个Vue+Express的开发环境
Jul 17 Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
Sep 14 Javascript
Javascript 之封装(Package)
Sep 14 Javascript
小程序click-scroll组件设计
Jun 18 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 Javascript
JavaScript实现tab栏切换效果
Mar 16 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
第十一节--重载
2006/11/16 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
PHP实现的堆排序算法详解
2017/08/17 PHP
django中的ajax组件教程详解
2018/10/18 PHP
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
js动态修改input输入框的type属性(实现方法解析)
2013/11/13 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
javascript实现拖放效果
2015/12/16 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
2020/12/24 Javascript
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
Python实现完整的事务操作示例
2017/06/20 Python
python机器学习之贝叶斯分类
2018/03/26 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
html5唤醒APP小记
2019/03/27 HTML / CSS
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
应届生骨科医生求职信
2013/10/31 职场文书
晨会主持词
2014/03/17 职场文书
英文感谢信格式
2015/01/21 职场文书
士兵突击观后感
2015/06/16 职场文书
呐喊读书笔记
2015/06/30 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
Python办公自动化之Excel(中)
2021/05/24 Python