JavaScript函数参数的传递方式详解

发布时间 - 2026-01-10 23:28:11    点击率:

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参数传递方式  # JavaScript函数的调用以及参数传递  # JS中把函数作为另一函数的参数传递方法(总结)  # javascript自定义函数参数传递为字符串格式  # js的函数的按值传递参数(实例讲解)  # javascript arguments 传递给函数的隐含参数  # JS函数动态传递参数的方法分析【基于arguments对象】  # 通过实例了解js函数中参数的传递  # 浅谈JavaScript 函数参数传递到底是值传递还是引用传递  # javascript函数中参数传递问题示例探讨  # js中对函数设置默认参数值的3种方法  # 深入理解JavaScript函数参数(推荐)  # JS函数参数的传递与同名参数实例分析  # 都是  # 在上面  # 象中  # 是一个  # 也会  # 或者是  # 并非如此  # 使其  # 作为一个  # 上看  # 另外一个  # 似乎是  # 相对应  # 获得了  # 改变了  # 是一样的  # class  # js  # function  # brush 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: 轻松掌握MySQL函数中的last_insert_id()  微信小程序制作网站有哪些,微信小程序需要做网站吗?  Laravel路由Route怎么设置_Laravel基础路由定义与参数传递规则【详解】  黑客入侵网站服务器的常见手法有哪些?  HTML透明颜色代码怎么让图片透明_给img元素加透明色的技巧【方法】  Python数据仓库与ETL构建实战_Airflow调度流程详解  Python结构化数据采集_字段抽取解析【教程】  文字头像制作网站推荐软件,醒图能自动配文字吗?  如何快速搭建支持数据库操作的智能建站平台?  如何在宝塔面板中修改默认建站目录?  C++用Dijkstra(迪杰斯特拉)算法求最短路径  手机网站制作与建设方案,手机网站如何建设?  javascript事件捕获机制【深入分析IE和DOM中的事件模型】  php打包exe后无法访问网络共享_共享权限设置方法【教程】  如何用AI帮你把自己的生活经历写成一个有趣的故事?  JavaScript实现Fly Bird小游戏  Laravel与Inertia.js怎么结合_使用Laravel和Inertia构建现代单页应用  如何快速建站并高效导出源代码?  图册素材网站设计制作软件,图册的导出方式有几种?  iOS验证手机号的正则表达式  php做exe能调用系统命令吗_执行cmd指令实现方式【详解】  Laravel怎么做数据加密_Laravel内置Crypt门面的加密与解密功能  Win11怎么设置虚拟桌面 Win11新建多桌面切换操作【技巧】  Python文件操作最佳实践_稳定性说明【指导】  Laravel策略(Policy)如何控制权限_Laravel Gates与Policies实现用户授权  用v-html解决Vue.js渲染中html标签不被解析的问题  DeepSeek是免费使用的吗 DeepSeek收费模式与Pro版本功能详解  非常酷的网站设计制作软件,酷培ai教育官方网站?  Laravel如何发送系统通知_Laravel Notifications实现多渠道消息通知  Laravel如何配置任务调度?(Cron Job示例)  如何用景安虚拟主机手机版绑定域名建站?  百度输入法ai组件怎么删除 百度输入法ai组件移除工具  laravel怎么实现图片的压缩和裁剪_laravel图片压缩与裁剪方法  如何在 Telegram Web View(iOS)中防止键盘遮挡底部输入框  Python制作简易注册登录系统  如何在云主机上快速搭建多站点网站?  深圳网站制作设计招聘,关于服装设计的流行趋势,哪里的资料比较全面?  做企业网站制作流程,企业网站制作基本流程有哪些?  Laravel如何创建自定义Facades?(详细步骤)  Laravel Facade的原理是什么_深入理解Laravel门面及其工作机制  Laravel怎么在Controller之外的地方验证数据  Laravel如何生成API文档?(Swagger/OpenAPI教程)  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做?  javascript基于原型链的继承及call和apply函数用法分析  英语简历制作免费网站推荐,如何将简历翻译成英文?  如何在Tomcat中配置并部署网站项目?  如何安全更换建站之星模板并保留数据?  微信小程序 闭包写法详细介绍  Laravel Seeder怎么填充数据_Laravel数据库填充器的使用方法与技巧  如何自定义建站之星模板颜色并下载新样式?