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 动态数据下的锚点错位问题解决方法
Dec 24 Javascript
jQuery示例收集
Nov 05 Javascript
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
SeaJS 与 RequireJS 的差异对比
Dec 08 Javascript
移动Web中图片自适应的两种JavaScript解决方法
Jun 18 Javascript
JavaScript中数据结构与算法(一):栈
Jun 19 Javascript
微信小程序slider组件使用详解
Jan 31 Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
简谈创建React Component的几种方式
Jun 15 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 Javascript
Vue自定义表单内容检查rules实例
Oct 30 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制作的意见反馈表源码
2007/03/11 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
Ext.MessageBox工具类简介
2009/12/10 Javascript
基于jquery的让页面控件不可用的实现代码
2010/04/27 Javascript
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
浅谈Python peewee 使用经验
2017/10/20 Python
Python及PyCharm下载与安装教程
2017/11/18 Python
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
工商管理毕业生推荐信
2013/12/24 职场文书
机关财务管理制度
2014/01/17 职场文书
办公设备采购方案
2014/03/16 职场文书
幼儿园小班见习报告
2014/10/31 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
结婚保证书(卖身契)
2015/02/26 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js