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 Sort 表格排序
Oct 31 Javascript
html的DOM中Event对象onabort事件用法实例
Jan 21 Javascript
尝试动手制作javascript放大镜效果
Dec 25 Javascript
微信小程序入门教程
Nov 18 Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 Javascript
js鼠标移动时禁止选中文字
Feb 19 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
Mar 29 Javascript
深入剖析Express cookie-parser中间件实现示例
Feb 01 Javascript
微信小程序+云开发实现欢迎登录注册
May 24 Javascript
移动端手指操控左右滑动的菜单
Sep 08 Javascript
vue 解决computed修改data数据的问题
Nov 06 Javascript
在antd4.0中Form使用initialValue操作
Nov 02 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
simplehtmldom Doc api帮助文档
2012/03/26 PHP
使用PHP编写的SVN类
2013/07/18 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
基于jquery实现省市联动效果
2015/11/23 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
2016/07/25 Javascript
BootStrap中Datepicker控件带中文的js文件
2016/08/10 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
微信小程序如何调用新闻接口实现列表循环
2019/07/02 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
js实现简单抽奖功能
2020/11/24 Javascript
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
在Python中操作列表之List.pop()方法的使用
2015/05/21 Python
Python实现模拟时钟代码推荐
2015/11/08 Python
python 迭代器和iter()函数详解及实例
2017/03/21 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
Django 框架模型操作入门教程
2019/11/05 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
C++和python实现阿姆斯特朗数字查找实例代码
2020/12/07 Python
FLOS美国官网:意大利高级照明工艺的传奇
2018/08/07 全球购物
实习生体会的自我评价范文
2013/11/28 职场文书
高中化学教学反思
2014/01/13 职场文书
监察建议书范文
2014/03/12 职场文书
法人代表授权委托书
2014/04/08 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
单位在职证明书
2014/09/11 职场文书
皇城相府导游词
2015/02/06 职场文书
中学教师个人总结
2015/02/10 职场文书
消防宣传标语大全
2015/08/03 职场文书
Java SSM配置文件案例详解
2021/08/30 Java/Android