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关于导航条背景切换效果实现示例
Sep 04 Javascript
JavaScript实现简单获取当前网页网址的方法
Nov 09 Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 Javascript
详解在网页上通过JS实现文本的语音朗读
Mar 28 Javascript
angularjs请求数据的方法示例
Aug 06 Javascript
vue实现Input输入框模糊查询方法
Jan 29 Javascript
微信小程序基于高德地图查找位置并显示文字
Oct 30 Javascript
webpack安装配置与常见使用过程详解(结合vue)
Jun 01 Javascript
Vue实现点击箭头上下移动效果
Jun 11 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
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
jquery 无限级联菜单案例分享
2013/03/26 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
jQuery实现带玻璃流光质感的手风琴特效
2015/11/20 Javascript
相册展示PhotoSwipe.js插件实现
2016/08/25 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
详解Angular如何正确的操作DOM
2018/07/06 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
基于VUE实现判断设备是PC还是移动端
2020/07/03 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
python下调用pytesseract识别某网站验证码的实现方法
2016/06/06 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
使用python编写监听端
2018/04/12 Python
python爬虫_实现校园网自动重连脚本的教程
2018/04/22 Python
wxPython实现窗口用图片做背景
2018/04/25 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
Python subprocess模块常见用法分析
2018/06/12 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
德国机车企业:FC-Moto
2017/10/27 全球购物
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
给实习单位的感谢信
2014/02/01 职场文书
驾驶员安全责任书
2014/07/22 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
《文化苦旅》读后感:阅读,让人诗意地栖居在大地上
2019/12/24 职场文书
spring cloud 配置中心native配置方式
2021/09/25 Java/Android