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 28 Javascript
Javascript delete 引用类型对象
Nov 01 Javascript
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
JavaScript节点及列表操作实例小结
Aug 05 Javascript
JavaScript事件 "事件对象"的注意要点
Jan 14 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
纯JS实现表单验证实例
Dec 24 Javascript
JS装饰器函数用法总结
Apr 21 Javascript
讲解vue-router之什么是动态路由
May 28 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
May 10 Javascript
js实现简单扫雷
Nov 27 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项目开发中最常用的自定义函数整理
2010/12/02 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
ThinkPHP 表单自动验证运用示例
2014/10/13 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
jQuery插件expander实现图片翻转特效
2015/05/21 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
JavaScript重载函数实例剖析
2016/05/13 Javascript
TypeScript入门-接口
2017/03/30 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
Python编程实现的图片识别功能示例
2017/08/03 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
TensorFlow Session会话控制&Variable变量详解
2018/07/30 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
python中的Elasticsearch操作汇总
2019/10/30 Python
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
.net面试题
2016/09/17 面试题
大学生英语演讲稿
2014/04/24 职场文书
工作保证书范文
2014/04/29 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
工作失职检讨书
2015/01/26 职场文书
污水处理保证书
2015/05/09 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
Python&Matlab实现樱花的绘制
2022/04/07 Python