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操纵Cookie实现购物车程序
Nov 23 Javascript
用JAVASCRIPT如何给<textarea></textarea>赋值
Apr 20 Javascript
基于jquery的地址栏射击游戏代码
Mar 10 Javascript
js 第二代身份证号码的验证机制代码
May 12 Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 Javascript
跟我学习javascript的for循环和for...in循环
Nov 18 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
webpack4 从零学习常用配置(小结)
May 28 Javascript
Javascript数组及类数组相关原理详解
Oct 29 Javascript
JS实现购物车基本功能
Nov 08 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中break及continue两个流程控制指令区别分析
2011/04/18 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
PHP智能识别收货地址信息实例
2019/01/05 PHP
Jquery选择器 $实现原理
2009/12/02 Javascript
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
javascript replace()正则替换实现代码
2010/02/26 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
JSON相关知识汇总
2015/07/03 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
2018/10/09 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
Pytorch mask_select 函数的用法详解
2020/02/18 Python
Django ORM filter() 的运用详解
2020/05/14 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
html5小程序飞入购物车(抛物线绘制运动轨迹点)
2020/10/19 HTML / CSS
匡威德国官网:Converse德国
2019/01/26 全球购物
员工拾金不昧表扬信
2014/01/09 职场文书
年度考核自我鉴定
2014/02/02 职场文书
护士自我鉴定总结
2014/03/24 职场文书
空气的环保标语
2014/06/12 职场文书
歌颂党的演讲稿
2014/09/10 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
Python中第三方库Faker的使用详解
2022/04/02 Python