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 相关文章推荐
在线编辑器中换行与内容自动提取
Apr 24 Javascript
JavaScript中prototype为对象添加属性的误区介绍
Oct 15 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
node.js中使用node-schedule实现定时任务实例
Jun 03 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
利用bootstrapValidator验证UEditor
Sep 14 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
Jun 08 Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 Javascript
解决layui弹出层layer的area过大被遮挡的问题
Sep 21 Javascript
JavaScript cookie原理及使用实例
May 08 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
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
PHP的开发框架的现状和展望
2007/03/16 PHP
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
用cssText批量修改样式
2009/08/29 Javascript
javascript getElementsByClassName实现代码
2010/10/11 Javascript
用js来解决ajax读取页面乱码
2010/11/28 Javascript
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
2016/05/12 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
2019/09/21 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
python基础教程之五种数据类型详解
2017/01/12 Python
Python编写Windows Service服务程序
2018/01/04 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
numpy ndarray 按条件筛选数组,关联筛选的例子
2019/11/26 Python
基于python监控程序是否关闭
2020/01/14 Python
python各层级目录下import方法代码实例
2020/01/20 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
Python 合并拼接字符串的方法
2020/07/28 Python
Servlet面试题库
2015/07/18 面试题
品牌转让协议书
2014/08/20 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书