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 相关文章推荐
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
javascript new fun的执行过程
Aug 05 Javascript
Jquery读取URL参数小例子
Aug 30 Javascript
javascript中call和apply的用法示例分析
Apr 02 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
May 11 Javascript
vuejs router history 配置到iis的方法
Sep 20 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 Javascript
node.js处理前端提交的GET请求
Aug 30 Javascript
简单了解vue 插值表达式Mustache
Jul 22 Javascript
js删除指定位置超链接中含有百度与360的标题
Jan 06 Javascript
js基于div丝滑实现贝塞尔曲线
Sep 23 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动态页生成静态页的3种常用方法
2014/11/13 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
Javascript 获取链接(url)参数的方法
2009/02/15 Javascript
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
详解ECMAScript typeof用法
2018/07/25 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
通过javascript实现扫雷游戏代码实例
2020/02/09 Javascript
vue实现移动端项目多行文本溢出省略
2020/07/29 Javascript
详解Node.JS模块 process
2020/08/31 Javascript
python中正则表达式的使用详解
2014/10/17 Python
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
Django 视图层(view)的使用
2018/11/09 Python
Python 可视化神器Plotly详解
2020/12/26 Python
幼儿园家长会欢迎词
2014/01/09 职场文书
优秀毕业生自我鉴定
2014/01/19 职场文书
家长评语大全
2014/01/22 职场文书
大学生活动策划方案
2014/02/10 职场文书
学校与家长安全责任书
2014/07/23 职场文书
党课心得体会范文
2014/09/09 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
汽车转让协议书范本
2014/12/07 职场文书
毕业论文答辩开场白和答辩技巧
2015/05/27 职场文书
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP