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 相关文章推荐
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
jquery如何根据值设置默认的选中项
Mar 17 Javascript
js选择并转移导航菜单示例代码
Aug 19 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 Javascript
jQuery实现文档树效果
Feb 20 Javascript
jQuery实现的简单拖动层示例
Feb 22 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
Apr 19 Javascript
Angular使用Md5加密的解决方法
Sep 16 Javascript
angularjs 动态从后台获取下拉框的值方法
Aug 13 Javascript
Vue组件通信的几种实现方法
Apr 25 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 Javascript
antd design table更改某行数据的样式操作
Oct 31 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 array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
PHP 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
PHP插件PHPMailer发送邮件功能
2017/02/28 PHP
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
Javascript中arguments用法实例分析
2015/06/13 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
基于Vue.js实现tab滑块效果
2017/07/23 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
Web服务器框架 Tornado简介
2014/07/16 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
Python实现的knn算法示例
2018/06/14 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
美国家居装饰店:Pier 1
2019/09/04 全球购物
光电信息专业应届生求职信
2013/10/07 职场文书
财务出纳员岗位职责
2013/11/26 职场文书
校园活动宣传方案
2014/03/28 职场文书
五年级学生评语
2014/04/22 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
校长师德表现自我评价
2015/03/04 职场文书
单位政审意见范文
2015/06/04 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android
再谈python_tkinter弹出对话框创建
2022/03/20 Python