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图像处理—仿射变换深度理解
Jan 16 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
jquery分割字符串的方法
Jun 24 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
Sep 05 Javascript
jQuery实现form表单元素序列化为json对象的方法
Dec 09 Javascript
webpack进阶——缓存与独立打包的用法
Aug 02 Javascript
Vue.js2.0中的变化小结
Oct 24 Javascript
使用vue2.0创建的项目的步骤方法
Sep 25 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
Oct 16 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
element-ui中el-upload多文件一次性上传的实现
Dec 02 Javascript
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 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
1 Tube Radio
2021/03/02 无线电
如何突破PHP程序员的技术瓶颈分析
2011/07/17 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
PHP实现SMTP邮件的发送实例
2018/09/27 PHP
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
javascript实现函数柯里化与反柯里化过程解析
2019/10/08 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python列表计数及插入实例
2014/12/17 Python
Python如何import文件夹下的文件(实现方法)
2017/01/24 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
python入门教程 python入门神图一张
2018/03/05 Python
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
使用Python读取二进制文件的实例讲解
2018/07/09 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
Python 忽略文件名编码的方法
2020/08/01 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
厂长岗位职责
2014/02/19 职场文书
社区班子对照检查材料
2014/08/27 职场文书
考博导师推荐信范文
2015/03/27 职场文书