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 相关文章推荐
一个js实现的所谓的滑动门
May 23 Javascript
Dom 学习总结以及实例的使用介绍
Apr 24 Javascript
js 文本滚动效果的实例代码
Aug 17 Javascript
js检测输入内容全为空格的方法
May 03 Javascript
JavaScript 学习笔记之数据类型
Jan 14 Javascript
Vue.js实现简单ToDoList 前期准备(一)
Dec 01 Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
Mar 07 Javascript
JavaScript中的E-mail 地址格式验证
Mar 28 Javascript
vue组件之间通信实例总结(点赞功能)
Dec 05 Javascript
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
微信小程序实现音频文件播放进度的实例代码
Mar 02 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
Zend公司全球首推PHP认证
2006/10/09 PHP
PHP 已经成熟
2006/12/04 PHP
PHP伪静态写法附代码
2008/06/20 PHP
PHP strcmp()和strcasecmp()的区别实例
2016/11/05 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
javascript中Math.random()使用详解
2015/04/15 Javascript
被遗忘的javascript的slice() 方法
2015/04/20 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
JavaScript类的继承多种实现方法
2020/05/30 Javascript
详解python中sort排序使用
2019/03/23 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
Python连接mysql方法及常用参数
2020/09/01 Python
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
Champion官网:美国冠军运动服装
2017/01/25 全球购物
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
同学会邀请书大全
2014/01/12 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
务工证明怎么写
2015/06/18 职场文书
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python
Spring Boot两种全局配置和两种注解的操作方法
2021/06/29 Java/Android