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 相关文章推荐
Jquery 获取checkbox的checked问题
Nov 16 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 Javascript
Bootstrap每天必学之js插件
Nov 30 Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 Javascript
Vue.js实战之组件之间的数据传递
Apr 01 Javascript
Node.js实现发送邮件功能
Nov 06 Javascript
详解Angular结合zTree异步加载节点数据
Jan 20 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
Dec 10 Javascript
vue 中使用print.js导出pdf操作
Nov 13 Javascript
用vite搭建vue3应用的实现方法
Feb 22 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
php IP转换整形(ip2long)的详解
2013/06/06 PHP
php通过数组实现多条件查询实现方法(字符串分割)
2014/05/06 PHP
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
php从文件夹随机读取文件的方法
2015/06/01 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
PHP的PDO常用类库实例分析
2016/04/07 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
简述php环境搭建与配置
2016/12/05 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
2016/06/07 Javascript
JavaScript手机振动API
2016/06/11 Javascript
JS请求servlet功能示例
2017/06/01 Javascript
原生JS实现的双色球功能示例
2018/02/02 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
Python内置函数bin() oct()等实现进制转换
2012/12/30 Python
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
python基础之入门必看操作
2017/07/26 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
Django实现快速分页的方法实例
2017/10/22 Python
python yield和Generator函数用法详解
2020/02/10 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
《猴子种树》教学反思
2014/02/14 职场文书