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 document.createDocumentFragment()
Apr 04 Javascript
Jquery数独游戏解析(一)-页面布局
Nov 05 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
Nov 11 Javascript
iframe窗口高度自适应的实现方法
Jan 08 Javascript
js正则表达式匹配数字字母下划线等
Apr 14 Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 Javascript
微信小程序 Template详解及简单实例
Jan 05 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 Javascript
Vue通过WebSocket建立长连接的实现代码
Nov 05 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
mysql 性能的检查和优化方法
2009/06/21 PHP
关于php mvc开发模式的感想
2011/06/28 PHP
php遍历数组的方法分享
2012/03/22 PHP
如何在PHP中使用正则表达式进行查找替换
2013/06/13 PHP
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
ThinkPHP3.2框架操作Redis的方法分析
2019/05/05 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
jquery显示和隐藏div特效实例
2013/02/27 Javascript
jQuery实现类似淘宝购物车全选状态示例
2013/06/26 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
React实现双向绑定示例代码
2016/09/19 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
Node.JS更改Windows注册表Regedit的方法小结
2017/08/18 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
JavaScript实现省市联动效果
2019/11/22 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
django使用xlwt导出excel文件实例代码
2018/02/06 Python
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
全球领先美式家具品牌:Ashley爱室丽家居
2017/08/07 全球购物
Tommy Hilfiger美国官网:美国高端休闲领导品牌
2019/01/14 全球购物
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
英文版销售经理个人求职信
2013/11/20 职场文书
十一酒店活动方案
2014/02/20 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
党员带头倡议书
2015/04/29 职场文书
2016年离婚协议书范文
2016/03/18 职场文书
Python极值整数的边界探讨分析
2021/09/15 Python
小程序实现侧滑删除功能
2022/06/25 Javascript