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 相关文章推荐
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 Javascript
浅谈 jQuery 事件源码定位问题
Jun 18 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
js实现将json数组显示前台table中
Jan 10 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
基于angular实现模拟微信小程序swiper组件
Jun 11 Javascript
Vue项目中如何引入icon图标
Mar 28 Javascript
详解vue axios用post提交的数据格式
Aug 07 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
Aug 07 Javascript
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
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 Token(令牌)设计
2008/03/15 PHP
JavaScript延迟加载
2021/03/09 Javascript
Juqery Html(),append()等方法的Bug解决方法
2010/12/13 Javascript
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
Bootstrap Paginator分页插件使用方法详解
2016/05/30 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
python实现爬虫下载漫画示例
2014/02/16 Python
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
Python多进程机制实例详解
2015/07/02 Python
全面了解python字符串和字典
2016/07/07 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
Python字典循环添加一键多值的用法实例
2019/01/20 Python
python中实现词云图的示例
2020/12/19 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
测绘工程本科生求职信
2013/10/10 职场文书
日语专业个人的求职信
2013/12/03 职场文书
新闻报道策划方案
2014/06/11 职场文书
优秀家长自荐材料
2014/08/26 职场文书
Vue3.0 手写放大镜效果
2021/07/25 Vue.js
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python