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入门教程(12) js对象化编程
Jan 31 Javascript
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 Javascript
使用JavaScript实现连续滚动字幕效果的方法
Jul 07 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
微信小程序日期时间选择器使用方法
Feb 01 Javascript
浅谈Node.js 沙箱环境
May 15 Javascript
JavaScript+H5实现微信摇一摇功能
May 23 Javascript
vue 微信扫码登录(自定义样式)
Jan 06 Javascript
详解webpack-dev-middleware 源码解读
Mar 23 Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 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
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
php中实现精确设置session过期时间的方法
2014/07/17 PHP
php连接mysql数据库
2017/03/21 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
Bootstrap插件全集
2016/07/18 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
2020/11/16 Javascript
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
Python列表推导式的使用方法
2013/11/21 Python
整理Python中的赋值运算符
2015/05/13 Python
python 调用c语言函数的方法
2017/09/29 Python
python实现搜索文本文件内容脚本
2018/06/22 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
本科生职业生涯规划书范文
2014/01/21 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP
python开发飞机大战游戏
2021/07/15 Python
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸
Tomcat弱口令复现及利用
2022/05/06 Servers