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 相关文章推荐
使用Java实现简单的server/client回显功能的方法介绍
May 03 Javascript
JS函数重载的解决方案
May 13 Javascript
Jquery时间轴特效(三种不同类型)
Nov 02 Javascript
JavaScript面向对象程序设计教程
Mar 29 Javascript
Node.js批量给图片加水印的方法
Nov 15 Javascript
JSON键值对序列化和反序列化解析
Jan 24 Javascript
JS原生轮播图的简单实现(推荐)
Jul 22 Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
js实现自定义右键菜单
May 18 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 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用mysql数据库存储session的代码
2010/03/05 PHP
php radio 单选框获取与保持值的实现代码
2010/05/15 PHP
一个PHP分页类的代码
2011/05/18 PHP
xml在joomla表单中的应用详解分享
2012/07/19 PHP
PHP读取PPT文件的方法
2015/12/10 PHP
java模拟PHP的pack和unpack类
2016/04/13 PHP
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
原生js实现查询天气小应用
2016/12/09 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
webpack入门+react环境配置
2017/02/08 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
javascript的this关键字详解
2019/05/20 Javascript
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
Python格式化压缩后的JS文件的方法
2015/03/05 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
Django的models中on_delete参数详解
2019/07/16 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
欧姆龙医疗欧洲有限公司:Omron Healthcare Europe B.V
2020/06/13 全球购物
介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用?
2014/03/05 面试题
公务员培训心得体会
2013/12/28 职场文书
教师节促销方案
2014/03/22 职场文书
护林防火标语
2014/06/27 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
慰问信范文
2015/02/14 职场文书
银行岗位培训心得体会
2016/01/09 职场文书