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 相关文章推荐
使用IE6看老赵的博客 jQuery初探
Jan 17 Javascript
javascript 验证日期的函数
Mar 18 Javascript
通过jQuery源码学习javascript(三)
Dec 27 Javascript
JavaScript极简入门教程(一):基础篇
Oct 25 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 Javascript
原生js实现验证码功能
Mar 16 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
Jan 31 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 Javascript
js实现自定义右键菜单
May 18 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
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(一)
2014/06/23 PHP
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
如何实现修改密码时密码框显示保存到cookie的密码
2013/12/10 Javascript
Bootstrap Paginator分页插件使用方法详解
2016/05/30 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
浅析如何利用JavaScript进行语音识别
2016/10/27 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
vue 中directive功能的简单实现
2018/01/05 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
Python文档生成工具pydoc使用介绍
2015/06/02 Python
python基础知识小结之集合
2015/11/25 Python
Python中的日期时间处理详解
2016/11/17 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
Python: 传递列表副本方式
2019/12/19 Python
python实现学生信息管理系统源码
2021/02/22 Python
canvas烟花特效锦集
2018/01/17 HTML / CSS
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
交通事故检查书范文
2014/01/30 职场文书
服装电子商务创业计划书
2014/01/30 职场文书
机关单位动员会主持词
2014/03/20 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
工作简历的自我评价
2019/05/16 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
python如何做代码性能分析
2021/04/26 Python
解决Golang中goroutine执行速度的问题
2021/05/02 Golang
springboot中一些比较常用的注解总结
2021/06/11 Java/Android
mysql自增长id用完了该怎么办
2022/02/12 MySQL
python3 字符串str和bytes相互转换
2022/03/23 Python