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动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 Javascript
详解JavaScript中循环控制语句的用法
Jun 03 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 Javascript
小程序input数据双向绑定实现方法
Oct 17 Javascript
Vue实现Layui的集成方法步骤
Apr 10 Javascript
小程序自定义弹框效果
Nov 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
PHP优于Node.js的五大理由分享
2012/09/15 PHP
解析php curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
Jquery插件之多图片异步上传
2010/10/20 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
全面理解闭包机制
2016/07/11 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
2016/10/15 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
浅谈Node.js:Buffer模块
2016/12/05 Javascript
javascript学习之json入门
2016/12/22 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
vuex入门最详细整理
2020/03/04 Javascript
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
python安装twisted的问题解析
2018/08/21 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
python 无损批量压缩图片(支持保留图片信息)的示例
2020/09/22 Python
优秀民警事迹材料
2014/01/29 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
大一学生职业生涯规划
2014/03/11 职场文书
大学迎新生标语
2014/10/06 职场文书
小学英语复习计划
2015/01/19 职场文书
留学推荐信怎么写
2015/03/26 职场文书