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 相关文章推荐
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
js中哈希表的几种用法总结
Jan 28 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
Oct 29 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
Vue.js组件间的循环引用方法示例
Dec 27 Javascript
使用JS location实现搜索框历史记录功能
Dec 23 Javascript
vue cli3适配所有端方案的实现
Apr 13 Javascript
vue实现简单全选和反选功能
Sep 15 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手册及PHP编程标准
2006/12/17 PHP
浅析PHP水印技术
2007/02/14 PHP
php利用新浪接口查询ip获取地理位置示例
2014/01/20 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
PHP AjaxForm提交图片上传并显示图片源码
2016/11/29 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
JS 强制设为首页的代码
2009/01/31 Javascript
理解Javascript_09_Function与Object
2010/10/16 Javascript
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
使用jQuery简单实现模拟浏览器搜索功能
2014/12/21 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
Vuejs第十二篇之动态组件全面解析
2016/09/09 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
2017/02/23 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
Python中的迭代器漫谈
2015/02/03 Python
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
使用Python实现博客上进行自动翻页
2017/08/23 Python
基于Python闭包及其作用域详解
2017/08/28 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
Scrapy模拟登录赶集网的实现代码
2020/07/07 Python
Python如何telnet到网络设备
2021/02/18 Python
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
搞笑车尾标语
2014/06/23 职场文书
法定代表人身份证明书
2014/09/10 职场文书
就业协议书
2014/09/12 职场文书
2015年社区工作总结
2015/04/08 职场文书
创业计划书之服装
2019/10/07 职场文书