JavaScript函数参数的传递方式详解


Posted in Javascript onMarch 06, 2017

JavaScript使用一个变量对象来追踪变量的生存期。基本类型值被直接保存在变量对象内;而引用类型值则作为一个指针保存在变量对象内,该指针指向实际对象在内存中的存储位置。

基本类型值的传递

向参数传递基本类型值时,被传递的值会被复制给一个局部变量(即命名参数,或者是arguments对象中的一个元素)。

function addOne (num) {
 num++;
 return num;
}
var count = 1;
var result = addOne(count);
console.log(count); //1
console.log(result); //2

在上面的例子中,变量count的值被传递给函数的参数num以便在函数中使用,此时变量count和参数num的值虽然是一样的,但是它们是两个相互独立的变量,在函数中改变参数num的值并不会影响函数外部的变量count的值。

因此JavaScript中函数的基本类型值参数的传递是按值传递的。

引用类型值的传递

function setName (obj) {
 obj.name = 'Nicholas';
}
var person = new Object();
setName(person);
console.log(person.name); //'Nicholas'

在上面的例子中,变量person的值被传递给函数的参数obj,此时在函数内部为参数obj添加一个name属性,函数对参数obj的使得函数外部的变量person也获得了一个name属性。从结果上看,JavaScript中函数的引用类型值参数的传递似乎是按引用传递的。

然而并非如此。变量person的值是引用类型值,因此它的值在变量对象中可以看做是一个实际对象在内存中的地址(或指针)。传递参数以后参数obj的值是也是该对象在内存中的地址,因此在函数中操作参数obj的值所引用的对象相当于操作变量person的值所引用的对象。

function setName (obj) {
 obj.name = 'Nicholas';
 obj = new Object();
 obj.name = 'Greg';
 return obj;
}
var person = new Object();
var result = setName(person);
console.log(person.name); //'Nicholas'
console.log(result.name); //'Greg'

如果参数传递是按引用传递的,在上面的例子中,函数改变了参数obj的值所引用的对象,那么相对应的变量person的值所引用的对象也会改变。改变函数的写法或许能更加有助于理解参数的按值传递。

function setName () {
 var obj = arguments[0];
 obj.name = 'Nicholas';
 obj = new Object();
 obj.name = 'Greg';
 return obj;
}

虽然变量person和参数obj的值一样都是同一个对象在内存中的地址,但它们是两个相互独立的变量。如果在函数中改变参数obj的值,使其指向内存中另外一个对象,变量person的值不会改变,还是指向原来的对象。

因此JavaScript中函数的引用类型值参数的传递是按值传递的。

结论

JavaScript中所有函数的参数都是按值传递的。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
基于jquery DOM写的类似微博发布的效果
Oct 20 Javascript
js获得地址栏?问号后参数的方法
Aug 08 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
原生js结合html5制作小飞龙的简易跳球
Mar 30 Javascript
jquery模拟实现鼠标指针停止运动事件
Jan 12 Javascript
AngularJS入门教程之AngularJS模型
Apr 18 Javascript
jQuery制作网页版选项卡
Jul 28 Javascript
javascript中apply/call和bind的使用
Feb 15 Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 Javascript
Ajax实现页面无刷新留言效果
Mar 24 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 #Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 #Javascript
jQuery Validate 相关参数及常用的自定义验证规则
Mar 06 #Javascript
jQuery简单实现遍历单选框的方法
Mar 06 #Javascript
jQuery在header中设置请求信息的方法
Mar 06 #Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 #Javascript
Vue.js 2.0中select级联下拉框实例
Mar 06 #Javascript
You might like
PHP执行zip与rar解压缩方法实现代码
2010/12/05 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
smarty获得当前url的方法分享
2014/02/14 PHP
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
2015/08/24 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
python文本数据相似度的度量
2018/03/12 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
python实现ping命令小程序
2020/12/28 Python
无畏的旅行:Intrepid Travel
2017/12/20 全球购物
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
软件测试工程师结构化面试题库
2016/11/23 面试题
任课老师推荐信范文
2013/11/24 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
篮球比赛口号
2014/06/10 职场文书
建筑安全生产目标责任书
2014/07/23 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
2015年教师学期工作总结
2015/04/30 职场文书
小学教育见习总结
2015/06/23 职场文书
消夏晚会主持词
2015/06/30 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android
Mysql忘记密码解决方法
2022/02/12 MySQL
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL