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 相关文章推荐
JavaScript随机生成信用卡卡号的方法
Apr 07 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
Nov 25 Javascript
详解Bootstrap glyphicons字体图标
Jan 04 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
Aug 31 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
原生JS写Ajax的请求函数功能
Dec 22 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
vue实现倒计时获取验证码效果
Apr 17 Javascript
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
Aug 24 Javascript
Openlayers+EasyUI Tree动态实现图层控制
Sep 28 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随机生成福彩双色球号码的2种方法
2013/02/04 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
百度移动版的url编码解码示例
2014/04/29 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
jQuery代码实现实时获取时间
2017/01/29 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
ES11新增的这9个新特性,你都掌握了吗
2020/10/15 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
Python守护进程用法实例分析
2015/06/04 Python
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
Python函数式编程
2017/07/20 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
符合语言习惯的 Python 优雅编程技巧【推荐】
2018/09/25 Python
python找出完数的方法
2018/11/12 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
Django中信号signals的简单使用方法
2019/07/04 Python
Xadmin+rules实现多选行权限方式(级联效果)
2020/04/07 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
Python操作Excel的学习笔记
2021/02/18 Python
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
巴西手表购物网站:eclock
2019/03/19 全球购物
2015新学期家长寄语
2015/02/26 职场文书
公司人力资源管理制度
2015/08/05 职场文书
护理心得体会范文
2016/01/22 职场文书