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中创建类/对象的几种方法总结
Nov 29 Javascript
关于js数组去重的问题小结
Jan 24 Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
May 20 Javascript
原生js的RSA和AES加密解密算法
Oct 08 Javascript
详解ES6中的let命令
Apr 05 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
Aug 13 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
详解ES6 Promise对象then方法链式调用
Oct 20 Javascript
对layui中table组件工具栏的使用详解
Sep 19 Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 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
global.php
2006/12/09 PHP
深入php中var_dump方法的使用详解
2013/06/24 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
使用Mootools动态添加Css样式表代码,兼容各浏览器
2011/12/12 Javascript
深入分析js中的constructor和prototype
2012/04/07 Javascript
Js点击弹出下拉菜单效果实例
2013/08/12 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
Vue组件开发初探
2017/02/14 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
VUE前端cookie简单操作
2017/10/17 Javascript
js保留两位小数方法总结
2018/01/31 Javascript
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
Python XML RPC服务器端和客户端实例
2014/11/22 Python
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
Python实现的选择排序算法示例
2017/11/29 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
美国最大的户外装备和服装购物网站:Backcountry
2019/10/15 全球购物
网络方面基础面试题
2012/11/16 面试题
linux面试题参考答案(10)
2013/11/04 面试题
英语文学专业学生的自我评价
2013/10/31 职场文书
学校读书活动总结
2014/06/30 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
工人先锋号申报材料
2014/12/29 职场文书
学校食堂管理制度
2015/08/04 职场文书
2016年记者节感言
2015/12/08 职场文书
MySQL 常见的数据表设计误区汇总
2021/06/07 MySQL