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 相关文章推荐
[JS]点出统计器
Oct 11 Javascript
Js获取事件对象代码
Aug 05 Javascript
jquery拖动插件(jquery.drag)使用介绍
Jun 18 Javascript
jQuery 无限级菜单的简单实例
Feb 21 Javascript
JS取request值以及自动执行使用示例
Feb 24 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
jquery预加载图片的方法
May 27 Javascript
jQuery使用方法
Feb 04 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
Jul 03 Javascript
JavaScript 判断iPhone X Series机型的方法
Jan 28 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 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脚本的10个技巧(4)
2006/10/09 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
php代码审计比较有意思的例子
2014/05/07 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
javascript编程起步(第七课)
2007/01/10 Javascript
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
Prototype源码浅析 Number部分
2012/01/16 Javascript
深入了解Node.js中的一些特性
2014/09/25 Javascript
javascript去除空格方法小结
2015/05/21 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
plupload+artdialog实现多平台上传文件
2016/07/19 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
vue v-model动态生成详解
2018/06/30 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
Python爬虫代理IP池实现方法
2017/01/05 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
python用户管理系统
2018/03/13 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
会计实习生工作总结的自我评价
2013/10/07 职场文书
学生自我鉴定模板
2013/12/30 职场文书
公务员培训自我鉴定
2014/02/01 职场文书
酒店管理求职信范文
2014/04/06 职场文书
《卖木雕的少年》教学反思
2014/04/11 职场文书
事业单位鉴定材料
2014/05/25 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
工作态度怎么写
2015/06/25 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
Python异常类型以及处理方法汇总
2021/06/05 Python