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获取网页中指定节点的父节点、子节点的方法小结
Apr 24 Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
JS+CSS3模拟溢出滚动效果
Aug 12 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
vue中rem的配置的方法示例
Aug 30 Javascript
vue-froala-wysiwyg 富文本编辑器功能
Sep 19 Javascript
JavaScript中EventBus实现对象之间通信
Oct 18 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中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
简单谈谈PHP面向对象之标识对象
2017/06/27 PHP
php实现数组重复数字统计实例
2018/09/30 PHP
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
Jquery通过JSON字符串创建JSON对象
2014/08/24 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
[07:49]2014DOTA2国际邀请赛 Newbee夺冠后采访xiao8坦言奖金会上交
2014/07/23 DOTA
简单介绍使用Python解析并修改XML文档的方法
2015/10/15 Python
Python将多个excel表格合并为一个表格
2021/02/22 Python
python3调用R的示例代码
2018/02/23 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
python tornado修改log输出方式
2019/11/18 Python
python简单实现插入排序实例代码
2020/12/16 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
北大青鸟学生求职信
2013/09/24 职场文书
高中生学习生活的自我评价
2013/11/27 职场文书
四风对照检查材料范文
2014/09/27 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
mysql字符串截取函数小结
2021/04/05 MySQL
浅谈Python响应式类库RxPy
2021/06/14 Python