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 相关文章推荐
json数据的列循环示例
Sep 06 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
Dec 27 Javascript
ie8本地图片上传预览示例代码
Jan 12 Javascript
Javascript基础之数组的使用
May 13 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
Jan 05 Javascript
vue.js实现简单轮播图效果
Oct 10 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
ES7之Async/await的使用详解
Mar 28 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 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之第三天
2006/10/09 PHP
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
php使用标签替换的方式生成静态页面
2015/05/21 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
JQuery优缺点分析说明
2011/04/10 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
React Router基础使用
2017/01/17 Javascript
angularjs实现首页轮播图效果
2017/04/14 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
Python字符串格式化%s%d%f详解
2018/02/02 Python
便捷提取python导入包的属性方法
2018/10/15 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
python 实现两个线程交替执行
2020/05/02 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
python设置表格边框的具体方法
2020/07/17 Python
pytorch使用horovod多gpu训练的实现
2020/09/09 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
python 如何用urllib与服务端交互(发送和接收数据)
2021/03/04 Python
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
Kathmandu英国网站:新西兰户外运动品牌
2017/03/27 全球购物
EJB3.1都有哪些改进
2012/11/17 面试题
搞笑爱情保证书
2014/04/29 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
世界上超棒的8种逻辑思维
2019/08/06 职场文书
MongoDB数据库之添删改查
2022/04/26 MongoDB