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 相关文章推荐
jQuery ul标签下拉菜单演示代码
Dec 11 Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
javascript常用方法总结
May 14 Javascript
bootstrap布局中input输入框右侧图标点击功能
May 16 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 Javascript
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
阿里巴巴技术文章分享 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
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
javascript中this的四种用法
2015/05/11 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
js异步编程小技巧详解
2017/08/14 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
详解在React-Native中持久化redux数据
2019/05/22 Javascript
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
python如何判断IP地址合法性
2020/04/05 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
北大研究生linux应用求职信
2013/10/29 职场文书
省三好学生申请材料
2014/01/22 职场文书
家长会学生演讲稿
2014/04/26 职场文书
总经理人事任命书
2014/06/05 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
2015年司法所工作总结
2015/04/27 职场文书
劳动模范获奖感言
2015/07/31 职场文书
少先队中队工作总结
2015/08/14 职场文书
新课程改革心得体会
2016/01/22 职场文书
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js
golang特有程序结构入门教程
2021/06/02 Python
Python绘画好看的星空图
2022/03/17 Python